具有多个tbody元素的固定表头滚动表格

Question

具有多个tbody元素的固定表头滚动表格

htmlcsstwitter-bootstrap

4

我在实现一个包含多个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;
}

- Adrian Taylor

你尝试过在一个div中将两个表格叠放在一起，只使用顶部表格中的TH元素-固定其位置，并在底部表格上设置overflow为scroll吗？<div> <table class="toptable">  </table> <table class="toptable">  </table> <table class="bottomtable">  </table> </div> - Korgrue

2个回答

0

这个问题已经在其他地方得到解决：

如何为HTML表格冻结顶部行（固定表头滚动）

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

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

这里是关于 sticky 的注意事项和支持链接：

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

- nrkn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prasad Kudalkar · Accepted Answer

你可以将表头和正文分别放在不同的表格中。顶层表格只包含表头，因为你可以将可滚动属性分配给内容表格。

一个有效的示例： 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>