固定ヘッダーと最初の列を持つスクロール可能な 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 中国語 Web サイトの他の関連記事を参照してください。