HTML5 テーブルにスクロールバーを追加するにはどうすればよいですか?

HTML5 テーブルにスクロール機能を追加する方法

表示行数が限られているテーブルにスクロールバーを追加するには、次の手順に従います。 :

1.テーブル構造の定義:

必要な列と行を含む基本的な HTML5 テーブルを作成します。例:

2.表の CSS を設定します:

表のスタイルを設定するには、CSS を使用してその寸法、色、配置を指定します。例:

#my_table {
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width: 500px;
    text-align: center;
}

3.スクロールバーを作成します:

スクロールバーを追加するには、テーブルの本体に注目します。このセクションは次のように構成する必要があります:

tbody {
    overflow: auto;
    height: 150px;
}

• オーバーフロー: テーブルのコンテンツが高さを超えるとスクロールが自動的に有効になります。
• 高さ: 150px は、テーブルの表示高さを次のように設定します。 150 ピクセル。一度に数行のみが表示されるようにする時間。

4.列の位置合わせを維持する:

表にヘッダー行がある場合は、スクロールしてもヘッダー行が本文と位置合わせされたままであることを確認する必要があります。これは、両方の要素を tableSection クラスでラップし、CSS:

table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}

5 を適用することで実現できます。列幅の調整 (オプション):

内容に関係なく、すべてのテーブル列の幅が同じになるようにするには、次の CSS を含めることができます:

table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

6.ヘッダーからスクロールバーを削除します (オプション):

ヘッダーをスクロール可能にしたくない場合は、次の CSS ルールを追加します:

table.tableSection thead {
    overflow: hidden;
}

7.スクロールバーの存在の処理 (オプション):

スクロールバーの存在に基づいて CSS を動的に調整するには、JavaScript を使用してスクロールバーの存在を検出し、必要なスタイルを適用することを検討してください。

以上がHTML5 テーブルにスクロールバーを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。