Html 带有粘性标题的表格使用CSS网格，带有表格滚动和无页面滚动_Html_Html Table_Css Grid_Css Tables

Html 带有粘性标题的表格使用CSS网格，带有表格滚动和无页面滚动

html

Html 带有粘性标题的表格使用CSS网格，带有表格滚动和无页面滚动,html,html-table,css-grid,css-tables,Html,Html Table,Css Grid,Css Tables,我一直在尝试创建一个可滚动的表格，而不必使页面可滚动，在顶部有固定的标题我不应该说我是在html组件模板中做这件事的。许多使用div而不是表的方法根本不起作用（不知道为什么）我希望这张桌子能占据100%的视野仅在表内滚动表格单元格中的文本应换行纯HTML+CSS，无JS 因此，我目前正试图通过表的CSS网格布局来实现这一点但这会导致一些事情：由于某种原因，表格比页面长表格比TH标记中的页面宽，如果内容必须换行内容比页面长，所以当它滚动时，不会显示所有文本（当我有横幅时，这

我一直在尝试创建一个可滚动的表格，而不必使页面可滚动，在顶部有固定的标题

我不应该说我是在html组件模板中做这件事的。许多使用div而不是表的方法根本不起作用（不知道为什么）

我希望这张桌子能占据100%的视野
仅在表内滚动
表格单元格中的文本应换行
纯HTML+CSS，无JS

因此，我目前正试图通过表的CSS网格布局来实现这一点

但这会导致一些事情：

由于某种原因，表格比页面长
表格比TH标记中的页面宽，如果内容必须换行
内容比页面长，所以当它滚动时，不会显示所有文本（当我有横幅时，这比演示代码更糟糕）

演示代码如下：

HTML:


分歧
…内容。。。

如果你在演示中滚动，你会看到标题一直粘到最底部并向上移动，因为它“认为”它到达了内容的末尾，而它还没有到达

有一段时间我一直在以10种不同的方式关注这个问题，如果有任何帮助，我都会非常感激。

我不是在电脑前尝试它，但是在table元素中添加

position:fixed

会阻止它滚动吗？固定工程不同的粘性。谢谢你的答复。确实如此，但随后内容被滚动到可滚动区域之外的根本问题（这就是导致粘性无法正常工作的原因）发生了。

 <html>
    <head>
        <link rel="stylesheet" href="blah.css"/>
    </head>

    <body>
        <table class="someclass" id="historychange">
          <thead>
            <tr><th>Differences</th></tr>
          </thead>
          <tbody>
            <tr>
              <td><pre>...content...</pre></td>
            </tr>
          </tbody>
        </table>
    </body>
    </html>