Este artículo presenta la implementación de la fijación del encabezado de la tabla html y la comparte con todos. Los detalles son los siguientes:
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>Número de contrato</th> <th width=30%>Cliente contratado</th> <th width= 20%>Liberar clientes</th> <th width=10%>Estado del contrato</th> <th width=30%>Cuota de ciclo de liberación de las condiciones seleccionadas</th> </thead> </table> </ div > <div clase=cuerpo-tabla> <tabla> <tbody id=tbody> </tbody> </table> </div></div>
Échale un vistazo a css
*{ relleno:0; margen:0; } th{ borde:1px sólido #e6e6e6; altura de línea: 5vh; color:#666666; tamaño de fuente: 16px; ; } td { relleno:5px; borde: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;} .tabla de cabecera de tabla,.tabla de cuerpo de tabla{ancho:100%;} .tabla de cuerpo de tabla tr:nth-child(2n+1){color de fondo:#f2f2f2;} .table-body table tr:hover { color de fondo:rgb(240, 249, 228);Haga clic para ver el efecto
De hecho, el punto clave es
1. Utilice la etiqueta colgroup para definir los anchos de columna de las tablas superior e inferior para mantenerlas consistentes.
2. El div .table-head superior agrega el estilo padding-right: 17px. Este ancho es para garantizar que sea coherente con la barra de desplazamiento del div .table-body inferior. Al mismo tiempo, la tabla inferior .table. -body agrega el estilo de desbordamiento- y:scroll;
Siempre que garantice los dos puntos anteriores, también puede crear una tabla con un encabezado fijo y, al mismo tiempo, no ocurrirá el problema de desalineación de las columnas superior e inferior. ¡Probado y comprobado!
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.