引導表溢出

Question

我想溢出我的表。

----------------------- 
| name | height | 
----------------------- 
| john | 5,8 ^
| josh | 6,4  | 
| joshua | 5,4  | 
| jon | 5,5  V 
----------------------- 

我用overflow-y：scroll; 但我想要的是，只有表格正在滾動。我想要的就像我上面的例子。

<table class="table table-hover table-responsive"> 
<thead> 
    <tr> 
    ... 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    ... 
    </tr> 
    <tr> 
    ... 
    </tr> 
</tbody> 

是否有可能溢出只有表體部分？我正在使用bootstrap。

Answer 1

最簡單的方法：

添加兩個表說，在一個表tabel1和表2。 現在包含table1中的表格標題和table2中的表格主體。 對於表2使用style="overflow:auto;"或style="overflow:scroll;"。

Answer 2

，我發現這個解決方案，它的工作原理

<table class="table table-striped"> 
     <thead> 
     <tr> 
      <th>header1</th> 
      <th>header2</th> 
      <th>header3</th> 
      <th>header4</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Column1</td> 
      <td>Column2</td> 
      <td>Column3</td> 
      <td>Column4</td> 
     </tr> 
     <tr> 
      <td>Column1</td> 
      <td>Column2</td> 
      <td>Column3</td> 
      <td>Column4</td> 
     </tr> 
      <tr> 
      <td>Column1</td> 
      <td>Column2</td> 
      <td>Column3</td> 
      <td>Column4</td> 
     </tr> 
     <tr> 
      <td>Column1</td> 
      <td>Column2</td> 
      <td>Column3</td> 
      <td>Column4</td> 
     </tr> 
     <tr> 
      <td>Column1</td> 
      <td>Column2</td> 
      <td>Column3</td> 
      <td>Column4</td> 
     </tr> 
     <tr> 
      <td>Column1</td> 
      <td>Column2</td> 
      <td>Column3</td> 
      <td>Column4</td> 
     </tr> 
     </tbody> 

    </table> 

和這個CSS

table { 
    width: 100%; 
} 

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

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


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

thead { 
    /* fallback */ 
} 


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

，你可以在這裏看到Bootply