Bei der Anzeige von Daten kann der feste Header eine bessere Lesbarkeit haben.
1. Implementierungsmethode:
1. Definieren Sie 2 Tabellen, eine absolute feste
<div> <table cellpadding = "0" cellpacing = "0" id = "table1"> <tr> <Th> <Tiv> Seriennummer </div> </th> <Th> <div> speichern Name </div> </Th> ... </tr> <tr> ... </tr> </tabel> </table cellpadding = "celling-tabel1> </tr> <tr> ..." cella ". </div>
2. Kopieren Sie die Tabelle 1 <Th> und geben Sie Tabelle 2 ein
var th_new = $ ("#Tabelle1 tr"). EQ (0) .Clone (); $ ("#Fixed-table1"). append (th_new);3. Die Größe der Größe der Größe (), um die <Th> Breite jeder Spalte in Tabelle 1 in Echtzeit zu erhalten
Funktion trresize () {$ ("#Fixed-table1 Th"). Jede (Funktion () {var num = $ (this) .Index (); var th_width = $ ("#Tabelle 1 Th"). Eq (num) .width (); }4. Die Seite ist zu klein, die Tabelle wird mit dem Tischkopf Scrolling gescrollt
$ (". Tabelle1-wapper"). scroll (function () {var scroll =-$ (this) .ScrollLeft () $ (". Fixed-table1-wapper"). CSS ("links", scroll+"px");});2. Achten Sie auf die Details:
1. Anpassungsbreite, Zelllücken entfernen:
<Table CellPadding = "0" cellpacing = "0"> </table>
2. Tischlinie:
Wenn Sie direkt einen Rand <td> hinzufügen, überlappen sich die Kanten. Attribute hinzufügen: Grenzkollapse: Zusammenbruch;
3. TD Breite:
Steuern Sie einfach die Breite der ersten Zeile <td> </td>/<td> </td>
4.. Verschiedene Farben von ungeraden und sogar Reihen:
CSS: #Tabelle1 Tr: N-Child (2n) {Hintergrundfarbe: #CCC;} IE7-Kompatibilitätsproblem
JQuery: $ ("#Tabelle 1 tr: Saor"). CSS ("Hintergrundfarbe", "#CCC");
Das Folgende ist der vollständige Code:
<! docType html> <html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <title> Tabellenorganisation </title> <link rel = "styleSheet" type = "text/cs src = "js/jQuery-1.8.3.min.js"> </script> <style type = "text/csS"> html {Überlauf: auto;} .table-wapper {width: 100%; Margin: 30px Auto; .Table1-WAPPER {Höhe: 200px; Überlauf-y: auto;} .Table-WAPPER-Tabelle {Grenze: 1px solid #f00; Zeilenhöhe: 2; Border-Collapse: Collapse; Weißraum: nowrap;} .Table-wapper th {font-size: 18px; font-wight: normal; td {text-align: center; border: 1px fest#f00;} .fixed-table1-wapper {Position: absolut; top: 0px; cellpadding="0" cellpacing="0" id="table1"> <tr> <th>Serial number</th> <th>Stock name</th> <th>Stock code</th> <th>Transaction</th> <th>Flooding</th> <th>Flooding</th> <th>Turbishment</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Industry sector</th> </tr> <tr> <td>1</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>2</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</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>Food and Beverage</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> Food und Getränk </td> </tr> <Td> 4 </td> <td> Bright Dairy </td> </td> <td> 600597. <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</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> Lebensmittel und Getränke </td> </tr> <tr> <td> 6 </td> <td> Bright Milchprodukte </td> <td> 600597 </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 Beverage</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>Food and Beverage</td> </tr> <tr> <td>9</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>10</td> <td>Bright Milchprodukte </td> <td> 600597 </td> <td> 15.2 </td> <td> +6,23%</td> <td> 0,12%</td> <td> Food und Getrauen </td> </tr> </tabel> </div> <tabletably> <tabletably "addabl. </table> </div> </div> <script type = "text/javaScript"> $ (function () {<br> $ ("#Tabelle 1 tr: sogar"). $ (". Fixed-table1-WAPPER"). $ (". Tabelle1-wapper"). scroll (function () {var scroll =-$ (this) .ScrollLeft () $ (". Fixed-table1-wapper"). CSS ("links", scroll+"px");}); function trresize () {var inner_width = $ ("#Tabelle1"). oterWidth (); $ (". Fixed-table1-WAPPER"). CSS ("Breite", Inner_width+"px"); $ ("#fixed-table1 th"). Jede (Funktion () {var num = $ (this) .Index (); var th_width = $ ("#Tabelle 1 Th"). Eq (num) .width (); //console.log(" -th_width:"+th_widthTHTHTH); $ (this). } </script> </body> </html>Die einfache Implementierung des festen Headers der obigen reaktionsschnellen Form ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.