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

具有固定標題的僅 CSS 滾動表

此問題需要僅 CSS 解決方案來建立具有固定標題的可滾動表。此解決方案的要求包括：

1. 保持頁眉、頁腳和內容行之間的列對齊
2. 在內容垂直滾動時允許頁眉和頁腳保持固定
3. 僅使用與表格相關的HTML 標籤（table、tr、th、td 等），而不使用JavaScript或jQuery

使用 Position: Sticky 的解決方案

一種可能的解決方案涉及使用position: Sticky 屬性。它的工作原理如下：

位置的使用：sticky

粘性定位將元素分配給相對位置，除了偏移量是根據最近的祖先滾動計算的如果沒有這樣的祖先，則為盒子或視窗。此行為非常適合固定表頭。

程式碼

以下程式碼示範了此技術：

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* == Just general styling, not relevant :) == */

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

<div>
  <table border="0">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </table>
</div>

此程式碼片段將表格放置在帶有捲軸程式碼的包裝div 中。透過將position:sticky分配給表格標題中的第th個元素，標題在內容垂直捲動時保持固定。

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