如何使用 CSS 建立具有固定標題的可捲動表格？

如何使用CSS 和固定標題製作可捲動表格

在Web 開發中，經常需要建立包含大量資料的表格，需要捲動。然而，在滾動表格主體的同時保持固定的標題可能具有挑戰性。以下是實現此效果的方法：

HTML 結構

首先，我們必須確保 HTML 結構正確。我們有一個帶有捲軸的外部 div，一個包含表格的內部 div，並且表格標題應該位於 內。

中的元素和表格資料

<div>

CSS 樣式

現在，我們需要使用 CSS來設定表格樣式：

/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}

其他注意事項

確保所有標題和資料儲存格都包含在

正確對齊的元素。如果您想要改變列寬，請使用 CSS 中的 nth-child 選擇器。

注意： 此方法適用於較小的表格。對於非常大的表，請考慮使用不同的技術，例如虛擬化或第三方函式庫。

以上是如何使用 CSS 建立具有固定標題的可捲動表格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！