修复了带有多个 tbody 元素的标题滚动表答案

【问题标题】：Fixed header scrolling table with multiple tbody elements修复了带有多个 tbody 元素的标题滚动表
【发布时间】：2016-03-14 22:14:56
【问题描述】：

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

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

表格需要使用 twitter-bootstrap 进行样式设置，但我不确定这与问题相关

希望这是有道理的！

这是一个小提琴（显然还没有按预期工作） 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;
}

【问题讨论】：

您是否尝试过将两个表格堆叠在一个 div 中，并且仅使用顶部表格中的 TH 元素 - 固定其位置，并将溢出设置为在底部表格上滚动。 <div><table class="toptable"></table><table class="toptable"></table><table class="bottomtable"><table class="bottomtable"></table></div>

标签： html css twitter-bootstrap

【解决方案1】：

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

一个有效的小提琴： 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>

【讨论】：

这不是一个好的解决方案，因为两个表中的列不会像在普通表中那样调整大小。
不知何故，我们需要修复所有单元格的宽度，以生成带有可滚动行的固定标题。

【解决方案2】：

这已经在别处解决了：

Freeze the top row for an html table only (Fixed Table Header Scrolling)

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

table thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
}

这里是警告和支持sticky 的链接：

https://caniuse.com/#feat=css-sticky

【讨论】：