부트 스트랩 테이블의 첫 번째 또는 첫 번째 열을 고정하는 방법은 무엇입니까?

Question

가로로뿐만 아니라 세로로 스크롤 할 때 첫 번째 열이 고정 된 테이블을 만들려고합니다. 나는 그것은 너무 answere을 데이 유래 질문

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 :

그때 테이블 높이 픽스를 제공 할 때 바이올린에 도시 된 바와 같이 첫번째 열은 오버 플로워되고

<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

16,먼저 열이 고정되어 있지 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>