HTML / CSS 技巧 - 可滚动的 tbody

本文发布于 7 年前,部分内容可能已经失去参考价值。

这个简单的技巧用来解决使固定表头(thead)和滚动表体 (tbody) 的问题。这使得数据表更易于浏览。当用户滚动表格时,固定表头为用户所注意的列提供了上下文。看下面图示你就明白了:

默认情况下,overflow 属性不适用于表格分组元素 theadtbody , 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 。

可能相关的内容