El propósito de este artículo es crear una tabla con un encabezado fijo y un cuerpo desplazable. Podemos crear una tabla de este tipo con cualquiera de los dos enfoques.
- Estableciendo la propiedad de posición en «adherente» y especificando «0» como valor de la propiedad superior para el elemento <th>.
- Configurando la visualización en «bloqueo» para los elementos <thead> y <tbody> para que podamos aplicar las propiedades de altura y desbordamiento a <tbody>.
Nota:
- La propiedad position establece el tipo de posicionamiento de un elemento.
- La propiedad de visualización establece cómo se debe mostrar un elemento.
Ejemplo: a continuación se muestra el código que ilustra la formación de una tabla con la propiedad de posición .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.fixTableHead {
overflow-y: auto;
height: 110px;
}
.fixTableHead thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #ABDD93;
}
</style>
</head>
<body>
<div class="fixTableHead">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Producción:
Ejemplo 2: a continuación se muestra el código que ilustra la formación de una tabla con la propiedad de visualización .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.tableFixHead {
width: 500px;
table-layout: fixed;
border-collapse: collapse;
}
.tableFixHead tbody {
display: block;
width: 100%;
overflow: auto;
height: 50px;
}
.tableFixHead thead tr {
display: block;
}
.tableFixHead th,
.tableFixHead td {
padding: 5px 10px;
width: 200px;
}
th {
background: #ABDD93;
}
</style>
</head>
<body>
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Producción:
