In diesem Artikel wird die Implementierung der HTML-Tabellenkopffixierung vorgestellt und mit allen geteilt. Die Details lauten wie folgt:
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>Vertragsnummer</th> <th width=30%>Vertragskunde</th> <th width= 20 %>Kunden freigeben</th> <th width=10 %>Vertragsstatus</th> <th width=30 %>Kontingent des Freigabezyklus ausgewählter Bedingungen</th> </thead> </table> </ div > <div class=table-body> <table> <tbody id=tbody> </tbody> </table> </div></div>
Schauen Sie sich CSS an
*{ padding:0; margin:0; th{ border:1px solid #e6e6e6; color:#666666; ; 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 Tabelle,.table-body Tabelle{width:100%;} .table-body Tabelle tr:nth-child(2n+1){background-color:#f2f2f2;} .table-body table tr:hover { background-color:rgb(240, 249, 228); Transition: .2s;Klicken Sie, um den Effekt zu sehen
Tatsächlich ist der entscheidende Punkt
1. Verwenden Sie das colgroup-Tag, um die Spaltenbreiten der oberen und unteren Tabellen zu definieren, um sie konsistent zu halten.
2. Der obere div .table-head fügt den Stil padding-right: 17px hinzu, um sicherzustellen, dass er mit der Bildlaufleiste des unteren div .table-body übereinstimmt -body fügt den Stilüberlauf hinzu- y:scroll;
Solange Sie die beiden oben genannten Punkte sicherstellen, können Sie auch eine Tabelle mit festem Kopf erstellen und gleichzeitig tritt das Problem der Fehlausrichtung der oberen und unteren Spalten nicht auf. Bewährt!
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.