创建具有固定标题的可滚动表格主体
使用大型表格时,通常需要固定标题,同时允许主体可滚动。这样,用户可以轻松浏览数据,而不会忘记列标题。
使用 CSS 位置:粘性
适用于 Chrome、Firefox 等现代浏览器Edge,一个简单的 CSS 解决方案就可以提供所需的行为。按应用位置:粘性;顶部:0;对于第 th 个元素,您可以将 header 固定在表格顶部,同时允许 tbody 独立滚动。
.tableFixHead { overflow: auto; height: 100px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
附加 CSS
至增强表格的外观和功能,根据需要包含其他 CSS。例如:
table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background: #eee; }
HTML 结构
在类为“tableFixHead”的 div 中,添加包含 thead 和 tbody 元素的表格。
<div>
以上是如何使用 CSS 创建具有固定标题的可滚动表格主体?的详细内容。更多信息请关注PHP中文网其他相关文章!