Este artigo apresenta a implementação da fixação do cabeçalho da tabela HTML e a compartilha com todos. Os detalhes são os seguintes:
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>Número do contrato</th> <th width=30%>Cliente contratado</th> <th width= 20%>Liberar clientes</th> <th width=10%>Status do contrato</th> <th width=30%>Liberar cota do ciclo de condições selecionadas</th> </thead> </table> </ div > <div class=tabela-corpo> <tabela> <tbody id=tbody> </tbody> </table> </div></div>
Dê uma olhada no css
*{ padding:0; margin:0; } th{ border:1px solid #e6e6e6; line-height: 5vh; ; } td { preenchimento:5px; borda:1px sólido #e6e6e6; } .table-head{padding-right:17px;background-color:rgb(207, 231, 179);color:#000;height:5vh;} .table-body{width:100% height:94vh;overflow; -y:scroll;} .table-head table,.table-body table{largura:100%;} .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;} .table-body table tr:hover { background-color:rgb(240, 249, 228);Clique para ver o efeito
Na verdade, o ponto chave é
1. Use a tag colgroup para definir as larguras das colunas das tabelas superior e inferior para mantê-las consistentes.
2. O div .table-head superior adiciona o estilo padding-right: 17px Essa largura é para garantir que seja consistente com a barra de rolagem do div .table-body inferior. -body adiciona o estilo overflow- y:scroll;
Contanto que você garanta os dois pontos acima, você também pode fazer uma tabela com cabeçalho fixo e, ao mesmo tempo, o problema de desalinhamento das colunas superior e inferior não ocorrerá!
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.