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

使用 CSS 設定具有固定標題的可捲動表格

您的表格既有可捲動主體又有固定標題，但您不確定如何實現此效果。為了解決這個問題，我們使用 將 HTML 中的 header 和 body 元素分開。和

。

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

接下來，我們為設定display: block。和分離它們的行為並在不影響標題的情況下啟用正文滾動。

table tbody, table thead {
  display: block;
}

我們為正文定義溢出和高度屬性：

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

因為標題和正文是視覺上分離但技術上聯繫在一起，我們為

設定靜態寬度。和 元素以確保正確的列對齊。

th {
  width: 72px;
}

td {
  width: 72px;
}

請記住包含正確的 HTML 格式，例如

;對於每一行，包括標題行。

<tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
</tr>

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