如何在 HTML 表格中正確設定溢出滾動的 body 高度？

使用溢出滾動設定 tbody 高度

使用 HTML 中的表格時，有時需要限制 tbody 元素的高度，同時啟用滾動溢位。不幸的是，單獨使用 tbody 上的 display:scroll 屬性是不夠的。

要達到所需的效果，需要組合CSS 屬性：

1.區塊顯示：

在tbody 上設定display: 區塊，使其脫離表格流程並允許其佔據自己的寬度和高度。

2.固定高度：

在 tbody 上指定高度：50px（或根據需要）來定義其高度。

3.表格行的表格顯示：

在表格主體的 tr 元素上設定 display: table 以保留其類似表格的行為。

4.固定表格版面：

使用 table-layout: 固定在 thead 和 tbody tr 上，以確保單元格分佈均勻。

5.調整標題寬度：

為了補償捲軸寬度，請使用 width: calc(100% - 1em).

範例：

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);
}
table {
  width: 400px;
}

注意：

最初，如果tbody 可能不會出現滾動條內容比指定的高度短。為了確保隨時出現捲軸，請在 tbody 上設定overflow-y:scroll。

此外，與網格佈局或基於 JavaScript 的解決方案等其他選項相比，考慮此方法的局限性也很重要。

以上是如何在 HTML 表格中正確設定溢出滾動的 body 高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！