Saltar al contenido

tabla html con encabezado fijo y ejemplo de código de cuerpo desplazable

Ejemplo 1: encabezado fijo de tabla

.tableFixHead thead th { position: sticky; top: 0; }

Ejemplo 2: encabezado fijo de cuerpo desplazable de tabla html

/*Simply*/  position:sticky; top: 0; /*your th elements*/

Ejemplo 3: el encabezado de la tabla jquery es independiente del desplazamiento

.header-fixed {
    width: 100% 
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 20%;
    float: left;
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *