ブートストラップテーブルの最初または最初のn列をフリーズする方法はありますか？

Question

私は、水平方向にも垂直方向にもスクロールするときに、最初の列がフリーズするテーブルを作成しようとしています。 私はそれがあまりにもanswereを持っているこのstackoverflowの質問

bootstrap 3 responsive table with fixed first column

を経ていますが、それはいくつかのバグを持っています。私はテーブルに固定の高さを与えたい。

http://jsfiddle.net/nt7fd965/144/
JS：

var $table = $('.table'); 
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column'); 

$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove(); 

$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; 
} 
@media(min-width:768px) { 
    .table-responsive>.fixed-column { 
     display: none; 
    } 
} 

HTML：

私は、テーブルの高さの修正を与える場合は、このフィドルに示すように、第1列がオーバーフローされます

<div class="table-responsive" style="height:300px"> 
<table class="table table-striped table-bordered table-hover table-condensed"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
    </tbody> 
</table> 

ここで

Answer 1

まず列が固定されていないソリューション demo

table { 
width: 100%; 
} 

thead, tbody, tr, td, th { display: block; } 

tr:after { 
content: ' '; 
display: block; 
visibility: hidden; 
clear: both; 
} 

thead th { 
height: 30px; 

/*text-align: left;*/ 
} 

tbody { 
height: 120px; 
overflow-y: auto; 
} 

thead { 
/* fallback */ 
} 


tbody td, thead th { 
width: 19.2%; 
float: left; 
} 

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>Make</th> 
     <th>Model</th> 
     <th>Color</th> 
     <th>Year</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="filterable-cell">Ford</td> 
     <td class="filterable-cell">Escort</td> 
     <td class="filterable-cell">Blue</td> 
     <td class="filterable-cell">2000</td> 
    </tr> 
    <tr> 
     <td class="filterable-cell">Ford</td> 
     <td class="filterable-cell">Escort</td> 
     <td class="filterable-cell">Blue</td> 
     <td class="filterable-cell">2000</td> 
    </tr> 
      <tr> 
     <td class="filterable-cell">Ford</td> 
     <td class="filterable-cell">Escort</td> 
     <td class="filterable-cell">Blue</td> 
     <td class="filterable-cell">2000</td> 
    </tr> 
    <tr> 
     <td class="filterable-cell">Ford</td> 
     <td class="filterable-cell">Escort</td> 
     <td class="filterable-cell">Blue</td> 
     <td class="filterable-cell">2000</td> 
    </tr> 
    </tbody>