В этой статье представлена реализация фиксации заголовка таблицы html, а подробности описаны ниже:
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>Номер контракта</th> <th width=30%>Клиент по контракту</th> <th width= 20%>Освободить клиентов</th> <th width=10%>Статус контракта</th> <th width=30%>Освободить квоту цикла для выбранных условий</th> </thead> </table> </ div > <div class=table-body> <таблица> <tbody id=tbody> </tbody> </table> </div></div>
Взгляните на CSS
* { дополнение: 0; маржа: 0; } th { border: 1px Solid # e6e6e6; line-height: 5vh; размер шрифта: 16 пикселей; } table { border-collapse: width: 100% } td {padding:5px; border:1px Solid #e6e6e6; размер шрифта: 14px; } .table-head{padding-right:17px;background-color:rgb(207, 231, 179);color:#000;height:5vh;} .table-body{width:100% height:94vh;переполнение -y:scroll;} .table-head table,.table-body table{width:100%;} .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;} .table-body table tr:hover {background-color:rgb(240, 249, 228);Нажмите, чтобы увидеть эффект
На самом деле, ключевым моментом является
1. Используйте тег colgroup, чтобы определить ширину столбцов верхней и нижней таблиц, чтобы обеспечить их согласованность.
2. Верхнему элементу div .table-head добавляется стиль padding-right: 17px. Эта ширина предназначена для обеспечения соответствия полосе прокрутки нижнего элемента div .table-body. В то же время нижняя таблица .table. -body добавляет стиль overflow- y:scroll;
Если вы соблюдаете два вышеуказанных пункта, вы также можете создать таблицу с фиксированным заголовком, и в то же время проблема несовпадения верхних и нижних столбцов не возникнет. Проверено!
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.