Al mostrar datos, el encabezado fijo puede tener una mejor legibilidad.
1. Método de implementación:
1. Defina 2 tablas, una fija absoluta
<div> <table cellPadding = "0" cellPacing = "0" id = "table1"> <tr> <th> <div> número de serie </div> </th> <th> <div> name de almacenamiento </div> </th> ... </tr> </table> </div>
2. Copie la tabla 1 <th> e inserte la tabla 2
var th_new = $ ("#tabla1 tr"). eq (0) .clone (); $ ("#fijo-table1"). append (th_new);3. Método de cambio () para obtener el ancho de cada columna en la Tabla 1 en tiempo real
función trRESize () {$ ("#fijo-table1 th"). Cada (function () {var num = $ (this) .index (); var th_width = $ ("#table1 th"). eq (num) .width (); $ (this) .css ("ancho", th_width+"px");}); }4. La página es demasiado pequeña, la mesa se desplaza con el encabezado de la mesa desplazándose
$ (". TABLE1-WAPPER"). scroll (function () {var scroll =-$ (this) .scrollleft () $ (". Table fijo1-wapper"). css ("izquierda", scroll+"px");});2. Presta atención a los detalles:
1. Ancho adaptativo, eliminar los huecos celulares:
<TABLE CELLPADDING = "0" CellPacing = "0"> </table>
2. Línea de mesa:
Si agrega directamente un borde <td>, los bordes se superpondrán; Agregar atributos: colapso de borde: colapso;
3. Ancho de TD:
Simplemente controle el ancho de la primera línea <TD> </td>/<td> </td>
4. Diferentes colores de filas impares y incluso:
CSS: #Tabla1 TR: NTH-Child (2n) {Background-Color: #CCC;} IE7 Problema de compatibilidad
jQuery: $ ("#table1 tr: incluso"). CSS ("Color de fondo", "#ccc");
El siguiente es el código completo:
<! DOCTYPE HTML> <HTML> <HEAD> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> table organización </title> <link rel = "styleSheet" type = "text/css" href = "css/básico.css"> <script type "/" javaScript " src = "js/jQuery-1.8.3.min.js"> </script> <style type = "text/css"> html {desbordamiento: auto;} .table-wapper {width: 100%; margen: 30px Auto; font-size: 16px; posición: relativo; overflow: sstden;} .table1-wapper {altura: 200px; overflow-y: auto;} .table-wapper table {border: 1px sólido #f00; línea-hieight: 2; border-colapse: colapso; space white: nowrap;} .table-wapper th {font-size: 18px; font-weight: normal; background-color: #DBDBDBDB;}. td {text-align: center; border: 1px solid#f00;} .fixed-table1-wapper {posición: absoluto; top: 0px; izquierda: 0px; background-color: #dbdbdb;}/*#table1 tr: nth-child (2n) {en segundo plano: #cccc;}*/</syle> <boat> <shiad> <veH <bode> <div> <viem> CellPadding = "0" CellPacing = "0" id = "Tabla1"> <tr> <th> Número de serie </th> <th> nombre de stock </th> <th> código de stock </th> <th> transacción </th> <th> inundación </th> inundaciones </th> <th> turbish <th> turbas </th> <th> turbas </th> <th> turbas </th> <th> turbas </th> <th> turbas </th> <th> turbas </th> <th> turbas </th> <th> turbas </th> <th> turbs </th> <th> turbas </th> turbas </th> <th> <th> <th> turbs <th> sector de la industria </th> </tr> <tr> <td> 1 </td> <td> bright lácteo </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <TD> 0.12%</td> <td> food and beverage </td> <td> 2 </td> <td> bright lácteos </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> alimentos y bebidas </td> </tr> <tr> <td> 3 </td> Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> food and Beverage </td> </tr> <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> alimentos y bebidas </td> </tr> <tr> <TD> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> alimentos y bebidas </td> </tr> <tr> <td> 5 </td> <td> dairy bright </td> <td> 600597 </td> <td> 15.2 </td> <TD> +6.23%</td> <td> 0.12%</td> <td> alimentos y bebidas </td> </tr> <tr> <td> 6 </td> <td> dairy bright <//td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td>>>/td> <TD> 0.12%</td> <td> alimentos y bebidas </td> </tr> <tr> <td> 7 </td> <td> lácteo brillante </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> Bebida </td> </tr> <tr> <td> 8 </td> <td> Bright Dairy </td> <td> 600597 </td> <TD> <td> 9 </td> <td> bright lácteos </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> alimentos y bebidas </td> </tr> <tr> <td> 10 </td> Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> food and beverage </td> </tr> </bable> </div> <div> <table cellpadding = "0" cellpacing </td> </tr> </table> </div> <div> <cele <rille cellPadding = "0" Cellpacing </td> </tr> </table> </div> <div> <<rille <lige CellPadding = "0" CellPacing </td> </tr> </table> </div> <div> <table de celda = "0" Cellpacing = "0" Id. </table> </div> </div> <script type = "text/javaScript"> $ (function () {<br> $ ("#table1 tr: incluso"). CSS ("Color de fondo", "#ccc"); // Parity Line Color var inner_width = $ ("#table1"). Outerwidth ();; $ (". Table fijo1-wapper"). CSS ("ancho", inner_width+"px"); $ (". TABLE1-WAPPER"). scroll (function () {var scroll =-$ (this) .scrollleft () $ (". Table fijo1-wapper"). css ("izquierda", scroll+"px");}); función trRESize () {var inner_width = $ ("#table1"). OuterWidth (); $ (". Table fijo1-wapper"). CSS ("ancho", inner_width+"px"); $ ("#fijo-table1 th"). Cada (function () {var num = $ (this) .index (); var th_width = $ ("#table1 th"). eq (num) .width (); //console.log("th_width:endo } </script> </body> </html>La implementación simple del encabezado fijo de la forma receptiva anterior es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.