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

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

HTML 結構

首先，我們必須確保 HTML 結構正確。我們有一個帶有捲軸的外部 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選擇器。 
注意：這種方法適合較小的表格。對於非常大的表，請考慮使用不同的技術，例如虛擬化或第三方函式庫。