為什麼我的正文不滾動？

解決表體(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中文網其他相關文章！