HTML / CSS 技巧 - 可滚动的 tbody
本文发布于 7 年前,部分内容可能已经失去参考价值。
这个简单的技巧用来解决使固定表头(thead
)和滚动表体 (tbody
) 的问题。这使得数据表更易于浏览。当用户滚动表格时,固定表头为用户所注意的列提供了上下文。看下面图示你就明白了:
默认情况下,overflow
属性不适用于表格分组元素 thead
, tbody
, tfoot
。你可以在下面的示例中看到:
为了使其工作,
第一步是:设置 tbody
为 display:block
,以便我们可以应用 height
和 overflow
属性。
下一步将是:设置thead
中的 tr
元素设置为 display:block
。
所以最终的CSS会是:
.fixed_header tbody{
display:block;
overflow:auto;
height:200px;
width:100%;
}
.fixed_header thead tr{
display:block;
}
这样,创建表格非常简单而且富有语义,并且没有依赖 JavaScript 。
c
转自
css88
7 年前
可能相关的内容