データを表示する場合、固定ヘッダーはより良い読みやすさを持つことができます。
1。実装方法：
1. 2つのテーブルを定義します。1つは絶対固定されています
<div> <table cellpadding = "0" cellpacing = "0" id = "table1"> <tr> <th div>シリアル番号</div> </th> <th div> store name </div> </th> ... </tr </tr </tr </tr> ... </tr> </table> </div> <div> </table> </div>
2。表1 <th>をコピーし、表2を挿入します
var th_new = $（ "＃table1 tr"）。eq（0）.clone（）; $（ "＃sixed-table1"）。append（th_new）;
3。Resize（）メソッド表1の各列の幅をリアルタイムで取得する方法
function trresize（）{$（ "＃sixed-table1th"）。各（function（）{var num = $（this）.index（）; var th_width = $（ "＃table1th"）。eq（num）.width（）; $（this）.css（ "width"、th_width+"px"）;}）; }4.ページが小さすぎ、テーブルはテーブルヘッダースクロールでスクロールされています
$（ "。table1-wapper"）。スクロール（function（）{var scroll = - $（this）.scrollleft（）$（ "。sixed-table1-wapper"）。css（ "left"、scroll+"px"）;}）;2。詳細に注意してください。
1。適応幅、セルギャップを削除します：
<table cellpadding = "0" cellpacing = "0"> </table>
2。テーブルライン：
境界線を直接追加すると、エッジが重複します。属性の追加：border-collapse：崩壊。
3。TD幅：
最初の行の幅を制御するだけです<td> </td>/<td> </td>
4。奇妙な列と偶数の異なる色：
css：＃table1 tr：nth-child（2n）{background-color：#ccc;} ie7互換性の問題
jQuery：$（ "＃table1 tr：ven"）。css（ "background-color"、 "＃ccc"）;
以下は完全なコードです。
< src = "js/jquery-1.8.3.min.js"> </script> <style type = "text/css"> html {overflow：auto;}。 .table1-wapper {height：200px; overflow-y：auto;} TD {Text-Align：Center; Border：1PX Solid＃F00;} .Fixed-Table1-Wapper {Position：Absolute; TOP：0PX;左：0px; background-color：#dbdbdb;}/*＃table1 Tr：nth-child（2n）{background-color：＃color：＃color：</< cellpadding = "0" cellpacing = "0" id = "table1"> <tr> <th>シリアル番号</th> <th>ストック名</th> <th>ストックコード</th> <th>トランザクション</th> <th>洪水</th> <th>浸水</th> <th <th> turbs </th> <th> turbs </th> <th> turbs </th> <th> turbs </th> <th th th> thutrbs </th> <th> turbs </th> <th> th> <th>産業部門</th> </tr> <tr> <td> 1 </td> <td>明るい乳製品</td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23％</td> <td> 0.12％ <td> 2 </td> <td>明るい乳製品</td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23％</td> <td> 0.12％</td> <td>食品とfeverag乳製品</td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23％</td> <td> 0.12％</td> <td> food and vevera </td> </tr> <tr> <td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23％</td> <td> 0.12％</td> <td>食品および飲料</td> </tr> <tr> <td> 4 </td> <td>明るい乳製品</td </td </td </td <td> <td> 15.2 </td> <td> +6.23％</td> <td> 0.12％</td> <td>食品および飲料</td> </tr> <tr> <td> 5 </td> <td> bright daiay </td> <td> <td> +6.23％</td> <td> 0.12％</td> <td>食品</td> </tr> <tr> <td> 6 </td> <td>明るい乳製品</td> <td> 600597 </td> <td> <td> 0.12％</td> <td>食品および飲料</td> </tr> <tr> <td> 7 </td> <td>明るい乳製品</td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23％</td>飲料</td> </tr> <tr> <td> 8 </td> <td>明るい乳製品</td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23％</td> <td> 0.12％ <td> 9 </td> <td>明るい乳製品</td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23％</td> <td> 0.12％</td> <td>食品とfeverag乳製品</td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23％</td> <td> 0.12％</td> <td> food and ververa </td> </tr> </table> </div </table> </div> </div> <script type = "text/javascript"> $（function（）{<br> $（ "＃table1 tr：ven"）。 $（ "。fixed-table1-wapper"）。 $（ "。table1-wapper"）。スクロール（function（）{var scroll = - $（this）.scrollleft（）$（ "。sixed-table1-wapper"）。css（ "left"、scroll+"px"）;}）; function trresize（）{var inner_width = $（ "＃table1"）。outerwidth（）; $（ "。sixed-table1-wapper"）。css（ "width"、inner_width+"px"）; $（ "＃sixt-table1th"） } </script> </body> </html>上記のレスポンシブフォームの固定ヘッダーの簡単な実装は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。