Question

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

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

Answer 2

此问题已在其他地方解决

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

简而言之，解决方案是在=== RUN TestMutateFlatbuffer2 2019/08/01 19:33:56.801926 foo_test.go:389 : [ I ]: serverId mutated to:2 --- FAIL: TestMutateFlatbuffer2 (0.00s) panic: Bytes were not mutated. [recovered] panic: Bytes were not mutated.上使用position: sticky-这就是我所使用的：

th

以下是警告和table thead th { position: sticky; position: -webkit-sticky; top: 0; z-index: 999; }支持的链接：

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

修复了具有多个tbody元素的标题滚动表

2 个答案: