Ao exibir dados, o cabeçalho fixo pode ter melhor legibilidade.
1. Método de implementação:
1. Defina 2 tabelas, uma absoluta fixa
<div> <tabela CellPadding = "0" CellPacing = "0" id = "tabela1"> <tr> <th> <div> Número de série </div> </th> <th> <div> Nome da loja </div> </th> ... </tr> <tr> ... </traslé <// </div>
2. Cópia Tabela 1 <TH> e Insira a Tabela 2
var th_new = $ ("#tabela1 tr"). Eq (0) .clone (); $ ("#fixo-table1"). Anexe (th_new);3. Redize () Método para obter a <th> largura de cada coluna na Tabela 1 em tempo real
function trrresize () {$ ("#tabela fixa1 th"). cada (function () {var num = $ (this) .index (); var th_width = $ ("#tabela 1"). eq (num) .width (); $ (this) .css ("largura", th_width+"p. }4. A página é muito pequena, a tabela é rolada com a rolagem do cabeçalho da tabela
$ (". Tabela1-wapper"). scroll (function () {var scroll =-$ (this) .ScrollLeft () $ ("..2. Preste atenção aos detalhes:
1. Largura adaptativa, remova as lacunas celulares:
<tabela CellPadding = "0" CellPacing = "0"> </ table>
2. Linha de mesa:
Se você adicionar diretamente uma borda <td>, as bordas se sobreporão; Adicione atributos: colapso da borda: colapso;
3. Largura TD:
Basta controlar a largura da primeira linha <td> </td>/<td> </td>
4. Cores diferentes de linhas ímpares e uniformes:
CSS: #Tabela1 TR: NTH-CHILD (2N) {Background-Color: #CCC;} IE7 Edição de compatibilidade
jQuery: $ ("#tabela1 tr: par"). css ("cor de fundo", "#ccc");
A seguir, o código completo:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> organização da tabela </title> <link rel = "styleSheet" type = "text/css" href = "cs> src = "js/jQuery-1.8.3.min.js"> </script> <style type = "text/css"> html {overflow: auto;} .table-wapper {width: 100%; margem: 30px automotor; font-size: 16px; position: relthwrof; .table1-wapper {altura: 200px; overflow-y: auto;} .table-wapper tabela {borda: 1px sólido #f00; altura da linha: 2; colapso de borda: colapso; espaço branco: agorapatrap;} .table-wapper th {font-size: 18px; font-weight: normap; corda-core: td {text-align: centro; borda: 1px sólido#f00;} .fixed-table1-wapper {Posição: absoluto; topo: 0px; esquerda: 0px; background-color: #dbdbdb;}/*#tabela1 tr: nth-child (2n) {background-color: #ccc; CellPadding = "0" CellPacing = "0" id = "Tabela1"> <tr> <th> Número de série </th> <th> Nome do estoque </th> <th> Código de estoque </th> <th> transação </the </th th the thh the </ <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> <h> setor da indústria </th> </tr> <tr> <td> 1 </td> <td> laticínios brilhantes </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23 e <Td> <ToD> </td> <td> <td> +6.23%<T. <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> alimentos e bebidas </td> </tr> </td> 3 </td> <thwled> <T. <td> 600597 </td> <td> 15.2 </td> <td> +6,23%</td> <td> 0,12%</td> <td> alimentos e bebidas </td> </tr> <tr> <td> 4 </td> <td> Brighty </td> </td> </td> </td> <T9 <Td> 15.2 </td> <td> +6,23%</td> <td> 0,12%</td> <td> alimentos e bebidas </td> </tr> <tr> <td> 5 </td> <td> <th> <t> <td> 60057 </td> <Td> <td> +6.23%</td> <td> 0,12%</td> <td> alimentos e bebidas </td> </tr> <tr> <td> 6 </td> <td> laticínios brilhantes </td> <td> 600597 </td> <td> 15.2 </td> <Td> 0,12%</td> <td> alimentos e bebidas </td> </tr> <tr> <td> 7 </td> <td> laticínios brilhantes </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> 15. Beverage </td> </tr> <tr> <td> 8 </td> <td> laticínios brilhantes </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23 e td <td> 0,12%</td> <td> +6.23%<Td> <td> 0,12%</td> <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 Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6,23%</td> <td> 0,12%</siB> <TD> alimento e bebida </td [/"/" " </tabela> </div> </div> <script type = "text/javascript"> $ (function () {<br> $ ("#tabela1 tr: par"). css ("colorido de fundo", "#ccc"); // linha de paridade cor var iner_width = $ ("#tabela1"). ". $ (". Tabela1-wapper"). scroll (function () {var scroll =-$ (this) .ScrollLeft () $ (".. function trrresize () {var iner_width = $ ("#tabela1"). OuterWidth (); $ (".. $ ("#table fixo1 th"). cada (function () {var num = $ (this) .index (); var th_width = $ ("#tabela1 th"). eq (num) .width (); //console.log("th_widthh+th_width); $ (this). } </script> </body> </html>A implementação simples do cabeçalho fixo da forma responsiva acima é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.