引導程序3具有固定第一列的響應表

Question

我專門針對移動設備，因此我有Bootstrap響應表。它只是一個引導類「table-responsive」和一個嵌套在類「table table-striped table-bordered table-hover table-condensed」中的表格。

有沒有簡單的方法來確保第一列是固定的（不水平滾動）？在移動設備上，可能每次都會滾動，但第一列包含基本上是表頭的內容。

Answer 1

如果您只定位移動設備，那麼這可能適用於您：您可以克隆表格中的第一列並應用position:absolute，以便在滾動表格的其餘部分時顯示在「前面」。

對於這個你需要一些基本的jQuery代碼和一個自定義CSS類：

jQuery的

$(function(){ 
    var $table = $('.table'); 
    //Make a clone of our table 
    var $fixedColumn = $table.clone().insertBefore($table).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($table.find('tr:eq(' + i + ')').height()); 
    }); 
}); 

CSS

.table-responsive>.fixed-column { 
    position: absolute; 
    display: inline-block; 
    width: auto; 
    border-right: 1px solid #ddd; 
    background-color: #fff; /* bootstrap v3 fix for fixed column background color*/ 
} 
@media(min-width:768px) { 
    .table-responsive>.fixed-column { 
     display: none; 
    } 
} 

這裏有一個working demo爲這種方法