如何使用 CSS 建立固定標題、可捲動正文的表格？

如何製作具有可捲動正文的固定標題表格

處理大型資料集時，通常需要顯示具有固定標題和可捲動正文的表格。這使用戶可以輕鬆導航表格，而不會丟失列標題。

不幸的是，此問題的最簡單解決方案要么無法與 Bootstrap 配合使用，要么會幹擾樣式。

固定表格頭- 僅CSS

對於Chrome、Firefox 和Edge，只需使用以下CSS 即可使列標題粘在表格頂部：

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table border="1">
    <thead>
      <tr>
<th>TH 1</th>
<th>TH 2</th>
</tr>
    </thead>
    <tbody>
      <tr>
<td>A1</td>
<td>A2</td>
</tr>
      <tr>
<td>B1</td>
<td>B2</td>
</tr>
      <tr>
<td>C1</td>
<td>C2</td>
</tr>
      <tr>
<td>D1</td>
<td>D2</td>
</tr>
      <tr>
<td>E1</td>
<td>E2</td>
</tr>
    </tbody>
  </table>
</div>

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