Seguí el código de @ koala_dev enesta publicación para tratar de bloquear la primera columna de mi mesa se desplaza horizontalmente. El código desafortunadamente no tiene efecto en mi mesa. Me preguntaba si alguien podría darme algunos consejos sobre lo que he hecho mal, ya que soy nuevo en la programación.

Esta es mi mesa:http://jsfiddle.net/mademoiselletse/bypbqboe/59/

Este es el código que inserté en JS (línea 121-133):

$(function() {
    var $tableClass = $('.table');
    // Make a clone of our table
    var $fixedColumn = $tableClass.clone().insertBefore($tableClass).addClass('fixed-column');

    // Remove everything except for first column
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    // Match the height of the rows to that of the original table's
    $fixedColumn.find('tr').each(function(i, elem) {
      $(this).height($tableClass.find('tr:eq(' + i + ')').height());
    });
});

Estas son las propiedades CSS (línea 36-47) que he insertado:

.table-responsive > .fixed-column {
   position: absolute;
   display: inline-block;
   width: auto;
   border-right: 1px solid #ddd;
}

@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

Lo único que me desvié delcódigo de demostración fue que definí$('.table') como$tableClass en lugar de$table ya que he definido previamentevar $table como$('#table') . ¡Su ayuda será muy apreciada!