具有多个tbody元素的固定标题滚动表

我无法实现包含多个tbody元素的固定标题可滚动表。具有多个tbody元素的固定标题滚动表

基本上，我想在固定大小的容器元素内放一张表。然后，我想滚动任何溢出的表格元素，而不移动标题。

表需要与Twitter的引导来的风格，但我不知道这是相关的问题

希望是有道理的！

这里是一个小提琴（显然不完全如预期运行至今） https://jsfiddle.net/whbbwv7g/

，代码：

<div id="tableContainer"> 
    <table class="table table-bordered table-hover"> 
     <thead> 
      <tr> 
       <th>Head 1</th> 
       <th>Head 2</th> 
       <th>Head 3</th> 
       <th>Head 4</th> 
      </tr> 
     </thead> 


      <tbody>    
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td>     
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
      </tbody> 
      <tbody>    
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td>     
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
      </tbody> 
      <tbody>    
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td>     
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
      </tbody> 


    </table> 
</div>

唯一的CSS是：

#tableContainer { 
    width: 300px; 
    height:150px; 
}

来源

2016-03-14 Adrian Taylor

你试过堆叠在海誓山盟的顶部两个表中一个div，并且只用了顶级表的TH元素 - 固定其位置，并设置溢出在底部桌上滚动。 '

' '' '' '

' '

' – Korgrue

您可以将您的标题和正文分成不同的表格。顶级表只会有标题，因为您可以为内容表分配可滚动的属性。

一个工作小提琴： https://jsfiddle.net/psk11/mjxb6vcr/

<table> 
    <thead> 
    <tr> 
     <th>Column 1</th> 
     <th>Column 2</th> 
     <th>Column 3</th> 
    </tr> 
    </thead> 
</table 

<table style="height:300px;display:block;overflow-y:auto;"> 
    <tbody> 
    <tr> 
     <td> 
     Row 1 Col 1 
     </td> 
     <td> 
     Row 1 Col 2 
     </td> 
     <td> 
     Row 1 Col 3 
     </td> 
    </tr> 
    </tbody> 

    <tbody> 
    <tr> 
     <td> 
     Row 2 Col 1 
     </td> 
     <td> 
     Row 2 Col 2 
     </td> 
     <td> 
     Row 2 Col 3 
     </td> 
    </tr> 
    </tbody> 


</table>

来源

2017-07-24 12:51:06

具有多个tbody元素的固定标题滚动表

回答

相关问题