Исправить первый столбец загрузочного стола

Question

Я выполнил код @ koala_dev в this post, чтобы попытаться заблокировать первый столбец. Моя таблица прокручивается горизонтально. Код, к сожалению, не влияет на мою таблицу. Мне было интересно, может ли кто-нибудь дать мне несколько указаний на то, что я сделал неправильно, поскольку я новичок в программировании.

Это мой стол: http://jsfiddle.net/mademoiselletse/bypbqboe/59/

Это код, я вставил в JS (строка 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()); 
    }); 
}); 

Это свойство CSS (строка 36-47) У меня есть вставлено:

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

Единственное, что я отклонился от demo code было то, что я определил $('.table'), как $tableClass вместо $table, так как я ранее определял var $table как $('#table'). Ваша помощь будет очень признательна!

Answer 1

Ok .. Удалить все ваши js код, и вы можете сделать это с помощью некоторых хитростей CSS, как показано ниже:

DEMO

CSS

.table > thead:first-child > tr:first-child > th:first-child { 
    position: absolute; 
    display: inline-block; 
    background-color: red; 
    height: 100%; 
} 

.table > tbody > tr > td:first-child { 
    position: absolute; 
    display: inline-block; 
    background-color: red; 
    height: 100%; 
} 

.table > thead:first-child > tr:first-child > th:nth-child(2) { 
    padding-left: 40px; 
} 

.table > tbody > tr > td:nth-child(2) { 
    padding-left: 50px !important; 
} 

Answer 2

$('#table') средство поиска по идентификатору table.

$('.table') означает, что найти элементы по категории table.

Это селектор CSS, который вы использовали в css.

В вашем случае у вашего стола был идентификатор table, поэтому вы можете выбрать эту таблицу, используя $('#table').

И у вас нет каких-либо элементов html, используя класс table, поэтому вы ничего не получите при выборе $('.table').