如何讓表格的TBody可以固定高度滾動？

使用溢出滾動設定 TBody 高度

當嘗試使用溢出滾動設定表格主體 (tbody) 的高度時，使用者可能會遇到困難。以下是實現所需結果的逐步指南：

要確保 tbody 顯示捲軸，請將其顯示屬性指定為 block。這將允許內容垂直流動。

接下來，將 tbody 中每個 tr 元素的顯示屬性設為 table。這將保持行的類似表格的行為。

要均勻分佈單元格，請使用表格佈局：固定；父表元素上的屬性。這可確保所有單元格具有相同的寬度並防止表格折疊。

需要注意的是，現代方法更喜歡網格佈局而不是此處描述的技術。網格佈局提供了改進的控制和更少的副作用。

這裡有一個 CSS 範例來示範解決方案：

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 仍然不顯示滾動條，請明確將overflow-y屬性設定為滾動。

但是，承認這種方法的某些缺點是至關重要的方法：

• 它將 thead 和 tbody 單元格網格分開，可能會影響對齊。
• 現在有更好的替代方案，例如網格佈局，可以避免這些問題。

以上是如何讓表格的TBody可以固定高度滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！