如何建立具有固定標題和第一列的可捲動 HTML 表格？

建立具有固定標題和第一列的可捲動HTML 表格

如何建立具有固定列標題和第一列的HTML 表格捲動表格內容時保持可見？

答案：

要實現此效果，您可以結合使用 CSS 和 JavaScript。具體方法如下：

1.建立HTML 表格：

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1 Header</th>
      <th>Column 2 Header</th>
      <th>Column 3 Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- more table rows -->
  </tbody>
</table></code>

2.固定標題和第一列的CSS：

<code class="css">table {
  width: 100%;
  overflow: scroll;
}

table thead {
  position: sticky;
  top: 0;
}

table tr td:first-child {
  position: sticky;
  left: 0;
}</code>

此CSS 確保滾動時表格標題固定在螢幕頂部，並且第一列保持固定在左側。

3.增強範例：

您也可以使用高級CSS 網格來實現類似的效果，更好地支援響應能力和螢幕閱讀器：

<code class="css">table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto 1fr;
}

table thead {
  grid-row: 1;
  grid-column: 1 / -1;
}

table tr {
  grid-column: 1 / -1;
}

table tr td:first-child {
  grid-column: 1;
}

table tbody {
  overflow: scroll;
}</code>

注意：提供的範例可能需要一些調整，具體取決於您的特定表格設計和瀏覽器相容性要求。

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