Sửa Cột đầu tiên của Bảng Bootstrap

Question

Tôi đã theo mã @ koala_dev trong this post để cố gắng khóa cột đầu tiên của bảng của tôi cuộn theo chiều ngang. Mã không may không có tác dụng trên bảng của tôi. Tôi đã tự hỏi nếu có ai có thể cho tôi một số gợi ý về những gì tôi đã làm sai như tôi mới để lập trình.

Đây là bàn của tôi: http://jsfiddle.net/mademoiselletse/bypbqboe/59/

Đây là mã tôi chèn trong JS (dòng 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()); 
    }); 
}); 

Đây là thuộc tính CSS (dòng 36-47) Tôi có chèn vào:

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

điều duy nhất tôi đã đi trệch khỏi các demo code là tôi định nghĩa $('.table') như $tableClass thay vì $table vì trước đây tôi đã xác định var $table là $('#table'). Giúp đỡ của bạn sẽ được nhiều đánh giá cao!

Answer 1

Ok .. Hủy bỏ tất cả các mã js của bạn và bạn có thể làm điều này với một số thủ thuật CSS như sau:

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') có nghĩa là yếu tố tìm kiếm của bạn theo id table.

$('.table') nghĩa là các yếu tố tìm kiếm của bạn theo lớp table.

Đây là các bộ chọn CSS bạn đã sử dụng trong css.

Trong trường hợp của bạn, bảng của bạn có id table để bạn có thể chọn bảng đó bằng cách sử dụng $('#table').

Và bạn không có bất kỳ phần tử html nào sử dụng lớp table, vì vậy bạn sẽ không nhận được gì khi bạn chọn sử dụng $('.table').