レスポンシブテーブルの固定ヘッダーの実装

データを表示するとき、読みやすくするためにテーブルのヘッダーが固定されます。

1. 実装方法:
1. 2 つのテーブルを定義し、1 つは絶対固定します

リーリー

2. テーブル 1 をコピーしてテーブル 2 に挿入します。

リーリー

3.size() メソッドは、テーブル 1 の各列の幅をリアルタイムで取得します

リーリー

4. ページが小さすぎる場合は、ヘッダーのスクロールとともに表もスクロールします

リーリー

2. 細部に注意を払う:

1. 幅適応型、セルギャップを削除:

2. テーブル行:

境界線を直接追加すると、エッジが重なり合います: border-collapse: Collapse;
3. td width:
最初の行の幅を制御します / 4. 奇数行と偶数行は異なる色になります:

css: #table1 tr:nth-child(2n){background-color:#ccc;} ie7 互換性の問題

jquery: $("#table1 tr:even")。 css( "背景色","#ccc");

以下は完全なコードです:

リーリー