Html 固定标题滚动表与多个tbody元素

我很难实现一个包含多个tbody元素的固定标题可滚动表

基本上，我想把一个表放在一个固定大小的容器元素中。然后我想滚动浏览所有溢出的表元素，而不移动标题

该表需要使用twitter引导设置样式，但我不确定这是否与问题相关

希望这有意义

这是一把小提琴（显然还没有达到预期的效果）

以及守则：

<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>

---

您可以将标题和正文分为单独的表。顶级表将只有标题，因为您可以为内容表分配可滚动属性

工作小提琴：

第1栏
第2栏
第3栏
这一问题已在其他地方得到解决：


简言之，解决方案是在
th
上使用
position:sticky
——这就是我使用的：

表THAD th{
位置：粘性；
职位：-网络工具包粘性；
排名：0；
z指数：999；
}

这里有一个链接，指向对
sticky
的注意事项和支持：

您是否尝试过在一个div中将两张桌子叠在一起，并且只使用顶部桌子中的TH元素-确定其位置，并将溢出设置为在底部桌子上滚动
这不是一个好的解决方案，因为这两个表中的列不会像在普通表中那样大小相同。不知何故，我们需要固定所有单元格的宽度，以获得一个固定的值带有可滚动行的标题。
#tableContainer {
    width: 300px;
    height:150px;
}

<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>