Cet article présente l'implémentation de la fixation de l'en-tête du tableau HTML et le partage avec tout le monde. Les détails sont les suivants :
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>Numéro de contrat</th> <th width=30%>Client sous contrat</th> <th width= 20%>Libérer les clients</th> <th width=10%>Statut du contrat</th> <th width=30%>Quota de cycle de libération des conditions sélectionnées</th> </thead> </table> </ div > <div class=table-body> <table> <tbody id=tbody> </tbody> </table> </div></div>
Jetez un oeil au CSS
*{ padding:0; margin:0; th{ border:1px solid #e6e6e6; line-height: 5vh; color:#666666; font-size: 16px; ; } td { padding:5px; border:1px solid #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{largeur:100%;} .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;} .table-body table tr:hover { background-color:rgb(240, 249, 228);Cliquez pour voir l'effet
En fait, le point clé est
1. Utilisez la balise colgroup pour définir les largeurs de colonnes des tableaux supérieur et inférieur afin de les maintenir cohérentes.
2. Le div supérieur .table-head ajoute le style padding-right: 17px Cette largeur permet de garantir qu'elle est cohérente avec la barre de défilement du div inférieur .table-body En même temps, le tableau inférieur .table. -body ajoute le style overflow- y:scroll;
Tant que vous garantissez les deux points ci-dessus, vous pouvez également créer un tableau avec un en-tête fixe, et en même temps, le problème de désalignement des colonnes supérieure et inférieure ne se produira pas !
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.