如何使用 CSS 製作帶有固定標題的可捲動表格？

如何在 CSS 中製作具有固定標題的可滾動表格

增強具有固定標題的表格，同時保持可滾動正文是 Web 開發中的常見要求。本文將深入研究使用 CSS 的全面解決方案。

問題

在提供的場景中，可捲動容器中的表格在捲動時難以保留其標題。根本問題源自於表頭和正文密不可分，導致它們一起滾動。

解

解決這個問題的關鍵在於將表頭（和表頭）分開。 ) 來自它的主體 (

)。透過為兩個元素設定 display: block，我們打破了它們的內在聯繫，使它們能夠獨立運作。

若要向正文引入捲動功能，請指派 Overflow: auto 並指定所需的高度。此外，為了防止標題在滾動過程中漂移，請使用 CSS 修復其寬度。

程式碼片段

table tbody, table thead {
    display: block;
}

table tbody {
    overflow: auto;
    height: 100px;
}

th {
    width: 72px;
}

td {
    width: 72px;
}

其他注意事項

• 缺少HTML元素： 確保所有行都包含在 內元素，包括標題行。
• 列寬控制：要在保持對齊的同時對列寬進行細微控制，請考慮使用以下程式碼：

table th:nth-child(1), td:nth-child(1) { min-width: 50px; max-width: 50px; }
table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
/* ... and so on for each subsequent column */

結論

透過分離表格的標題和正文並實現上述CSS 屬性，我們成功創建了一個可滾動表格固定headers，滿足原始查詢的要求。

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