为什么我的正文不滚动？

解决表体 (tbody) 中的溢出滚动问题

在启用溢出滚动的同时设置 tbody 元素的高度，您可能遇到过以下 CSS snippet:

tbody {
  height: 50px;
  display: block;
  overflow: scroll;
}

尽管实现了此样式，tbody 元素仍然没有响应滚动。要解决此问题，请考虑利用以下 CSS 规则：

• display: block; for tbody：将tbody元素转换为块元素以允许滚动。
• display: table; for tr：通过将每个 tr 元素的显示属性设置为 table 来维护表格行为。
• table-layout: 固定；对于 tr 和 thead：通过使用 table-layout 确保单元格均匀分布：fixed；对于 tr 和 thead 元素。

table, tr td {
  border: 1px solid red;
}

tbody {
  display: block;
  height: 50px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em); /* Adjust for scrollbar width */
}

table {
  width: 400px;
}

如果 tbody 元素由于内容不足而仍然无法显示滚动条，请显式设置 Overflow 属性为 Overflow-y:scroll;强制出现滚动条。

tbody {
  ...
  overflow-y: scroll;
}

注意：重要的是要意识到这种实现表格滚动的方法在某些情况下可能存在局限性。特别是，它可能导致标题单元格和正文单元格之间不对齐。如果对齐至关重要，请考虑使用更强大的布局技术，例如 CSS 网格。

以上是为什么我的正文不滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！