Lors de l'affichage des données, l'en-tête fixe peut avoir une meilleure lisibilité.
1. Méthode d'implémentation:
1. Définir 2 tables, une fixe absolue
<div> <table CellPadding = "0" Cellpacing = "0" id = "Table1"> <tr> <th> <v> Numéro de série </ div> </th> <th> <div> Store Name </div> </ th> ... </tr> <tr> ... </ tr> </ Table> </ Div> <div> <Table CellPadding = "0" Cellpacing = "0" Id = "Correct-Table1" </div>
2. Copier le tableau 1 <th> et insérer le tableau 2
var th_new = $ ("# Table1 tr"). Eq (0) .clone (); $ ("# fixe-table1"). append (th_new);3. Resize () Méthode pour obtenir la largeur <h> de chaque colonne du tableau 1 en temps réel
fonction trresize () {$ ("# fixe-table1 th"). Chaque (fonction () {var num = $ (this) .index (); var th_width = $ ("# table1 th"). eq (num) .width (); $ (this) .css ("width", th_width + "px");}); }4. La page est trop petite, la table est défilée avec la tête de la table à faire défiler
$ (". Table1-Wapper"). Scroll (function () {var Scroll = - $ (this) .scrollleft () $ (". fixe-table1-wapper"). css ("Left", scroll + "px");});2. Faites attention aux détails:
1. Largeur adaptative, retirer les lacunes des cellules:
<table cellpadding = "0" cellpacing = "0"> </ table>
2. Ligne de table:
Si vous ajoutez directement une bordure <TD>, les bords se chevaucheront; Ajouter des attributs: la frontière-effondrement: effondrement;
3. Largeur TD:
Contrôlez simplement la largeur de la première ligne <td> </td> / <td> </td>
4. différentes couleurs de rangées étranges et même:
CSS: # Table1 tr: Nth-Child (2n) {Background-Color: #ccc;} IE7 Probatibilité du problème
jQuery: $ ("# table1 tr: même"). CSS ("Background-Color", "# CCC");
Ce qui suit est le code complet:
<! doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <tight> Table Organisation </ title> <link rel = "Stylesheet" type = "text / css" href = "css / basic.css"> <script / javaspre src = "js / jQuery-1.8.3.min.js"> </ script> <style type = "text / css"> html {overflow: auto;} .table-wapper {width: 100%; margin: 30px auto; font-size: 16px; position: relative; overflow: caché;}. .Table1-wapper {hauteur: 200px; overflow-y: Auto;}. Table-table-wapper {border: 1px solide # f00; line-height: 2; border-collapse: effondrement; white-espace: Nowrap;} .Table-wapper th {font-size: 18px; font-weight: normal; background-colore: #dbdbdb;}. TD {Text-Align: Center; Border: 1px solide # f00;} .fixed-table1-wapper {position: Absolute; top: 0px; Left: 0px; background-Color: #dbdbdb;} / * # table1 tr: nth-child (2n) {background-Color: #ccc;} * / </pyle> CellPadding = "0" Cellpacing = "0" id = "Table1"> <Tr> <Th> Numéro de série </th> <Th> Nom de stock </ Th> <Th> Code d'origine </ Th> <Th> Transaction </ Th> <Th> Inondation </ Th> <TH> Inondation </ Th> <Th> Turboullage </ Th> Turbs </th> </ Th> Turbes </ Th> Turbs <TH> TURBS </th> </ TH> TURBES </ TH> TURBES </ TH> TH> TURBES </ TH> TURBES </ TH> TH> TURBES </ TH> TURBES </ TH> TH> TURBES </ TH> TURBES </ TH> <th> Turbes </ th> <th> turbes </ th> <th> turbes </th> <th> turbes </th> <th> turbes </ th> <th> turbes </ th> <th> turbes </ th> <th> turbes </ th> <th> turbes </ th> <th> Turbes </ th> turbes </th> <th> turbes </ th> turbes <th> turbes </th> <th> SECTEUR INDUSTRIELLE </ TH> </TR> <TR> <TD> 1 </TD> <TD> BRIGHT DAIRY </TD> <TD> 600597 </TD> <TD> 15.2 </TD> <TD> +6.23% </fr> <td> 0,12% </td> <td> Food and Teen, </td> </r> <Td> 2 </td> <Td> Bright Dairy </td> <Td> 600597 </td> <Td> 15.2 </td> <td> +6.23% </td> <td> 0,12% </td> <td> aliments et boissons </td> </tr> <tr> <td> 3 </td> <d> Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23% </td> <td> 0,12% </td> <td> aliments et boissons </td> </ tr> <tr> <td> 3 </td> <td> Bright Dairy </td> <Td> 600597 </td> <td> 15.2 </td> <td> +6.23% </td> <td> 0,12% </td> <td> aliments et boissons </td> </tr> <tr> <td> 4 </td> <td> daim </td> <td> 600597 <td> daim </td> <td> 600597 <td> <td> 15.2 </td> <td> +6.23% </td> <td> 0,12% </td> <td> aliments et boissons </td> </tr> <tr> <td> 5 </td> <td> Bright Dairy </td> </td> 600597 </td> <td> 15.2 </td> <Td> +6.23% </td> <TD> 0,12% </td> <td> aliments et boissons </td> </tr> <tr> <Td> 6 </td> <td> Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>7</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Boisson </ td> </tr> <tr> <td> 8 </td> <td> Bright Dairy </td> <Td> 600597 </td> <td> 15.2 </td> <td> +6.23% </td> <td> 0,12% </td> <td> alimentaire et boisson </td> </r> <Td> 9 </td> <Td> Bright Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23% </td> <td> 0,12% </td> <td> alimentaire et bibliothèque </td> </tr> <tr> <td> 10 </td> <d> <d> Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23% </td> <td> 0,12% </td> <td> aliments et boissons </td> </tr> </pable> </v> <v> <pable CellPadding = "0" Cellpacing = "0" 0 "ID =" FIXE-Table1 " </ table> </div> </ div> <script type = "text / javascript"> $ (function () {<br> $ ("# table1 tr: même"). CSS ("background-color", "# ccc"); // parity line couleur var_width = $ ("# table1"). overwidth (); $ (". Fixed-Table1-Wapper"). $ (". Table1-Wapper"). Scroll (function () {var Scroll = - $ (this) .scrollleft () $ (". fixe-table1-wapper"). css ("Left", scroll + "px");}); function trresize () {var inner_width = $ ("# table1"). outerwidth (); $ (". fixe-table1-wapper"). css ("width", inner_width + "px"); $ ("# fixe-table1 th"). chaque (fonction () {var num = $ (this) .index (); var th_width = $ ("# table1 th"). eq (num) .width (); //console.log("th_width:"+th_width); $ (this) .csss ("width", th_width + "px"); } </ script> </ body> </html>L'implémentation simple de l'en-tête fixe de la forme réactive ci-dessus est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.