Corrigir a primeira coluna de uma tabela de inicialização

Eu segui o código de @ koala_dev emesta postagem para tentar bloquear a primeira coluna, minha tabela rola horizontalmente. Infelizmente, o código não tem efeito na minha mesa. Fiquei me perguntando se alguém poderia me dar algumas dicas sobre o que fiz de errado, pois sou novo em programação.

Esta é a minha mesa:http://jsfiddle.net/mademoiselletse/bypbqboe/59/

Este é o código que inseri no JS (linha 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 são as propriedades CSS (linha 36-47) que inseri:

.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;
    }
}

A única coisa que me desviei docódigo de demonstração foi que eu defini$('.table') Como$tableClass ao invés de$table desde que eu defini anteriormentevar $table Como$('#table') . Sua ajuda será muito apreciada!

questionAnswers(3)

yourAnswerToTheQuestion