我正在编写一个页面，我需要一个 HTML 表来保持设定的大小。我需要表格顶部的标题始终保持在那里，但无论向表格添加多少行，我还需要表格主体滚动。想想一个迷你版的 excel。这似乎是一项简单的任务，但我在网上找到的几乎所有解决方案都有一些缺点。我该如何解决这个问题？
如何让桌子的身体滚动但保持其头部固定到位？
IT技术
javascript
html
css
html-table
2021-01-12 16:07:33
6个回答
我必须找到相同的答案。我发现的最好的例子是http://www.cssplay.co.uk/menu/tablescroll.html - 我发现例子 #2 对我来说效果很好。您必须使用 Java Script 设置内表的高度，其余的是 CSS。
我发现DataTables非常灵活。虽然它的默认版本基于 jquery，但也有一个AngularJs 插件。
我看到了 Sean Haddy对类似问题的出色解决方案，并冒昧地进行了一些编辑：
- 使用类而不是 ID，因此一个 jQuery 脚本可以在一页上重复用于多个表
- 添加了对语义 HTML 表格元素（如标题、thead、tfoot 和 tbody）的支持
- 使滚动条可选，因此它不会出现在比可滚动高度“短”的表格中
- 调整滚动 div 的宽度以将滚动条带到表格的右边缘
- 使概念可访问
- 在注入的静态表头上使用 aria-hidden="true"
- 并保留原来的thead，只是用jQuery隐藏并设置
aria-hidden="false"
- 显示了具有不同大小的多个表的示例
不过，肖恩做了繁重的工作。也感谢 Matt Burland 指出需要支持 tfoot。
您是否尝试过使用 thead 和 tbody，并使用 overflow:scroll 在 tbody 上设置固定高度？
你的目标浏览器是什么？
编辑：它在 Firefox 中（几乎）运行良好 - 添加垂直滚动条导致需要水平滚动条 - oop。IE 只是将每个 td 的高度设置为我指定的 tbody 高度。这是我能想到的最好的：
<html>
<head>
<title>Blah</title>
<style type="text/css">
table { width:300px; }
tbody { height:10em; overflow:scroll;}
td { height:auto; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>One</th><th>Two</th>
</td>
</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
你需要的是：
1)有一个高度有限的表格主体，因为只有当内容大于滚动窗口时才会发生滚动。但是tbody不能调整大小，您必须将其显示为 ablock才能这样做：
tbody {
overflow-y: auto;
display: block;
max-height: 10em; // For example
}
2）重新同步表格标题和表格正文列的宽度，使后者block成为一个不相关的元素。这样做的唯一方法是通过对两者强制使用相同的列宽来模拟同步。
但是，由于tbody它本身是block现在，它不能再像table. 由于您仍然需要一种table行为来正确显示您的列，因此解决方案是要求您的每一行都显示为单独的tables：
thead {
display: table;
width: 100%; // Fill the containing table
}
tbody tr {
display: table;
width: 100%; // Fill the containing table
}
（请注意，使用此技术，您将无法再跨越行）。
完成后，您可以强制列宽在thead和 中具有相同的宽度tbody。你不能这样：
- 单独为每一列（通过特定的 CSS 类或内联样式），这对于每个表实例来说是相当乏味的；
- 统一用于所有列（
th, td { width: 20%; }例如，如果您有 5 列，则通过），这更实用（无需为每个表实例设置宽度）但不能用于任何列数 - 通过固定的表格布局，统一为任何列计数。
我更喜欢最后一个选项，它需要添加：
thead {
table-layout: fixed; // Same layout for all cells
}
tbody tr {
table-layout: fixed; // Same layout for all cells
}
th, td {
width: auto; // Same width for all cells, if table has fixed layout
}
其它你可能感兴趣的问题