El enfoque de este artículo es crear una tabla con un ancho del 100 % usando la propiedad de ancho y crear un desplazamiento vertical dentro del cuerpo de la tabla usando la propiedad overflow-y. La propiedad de desbordamiento se usa para crear una barra de desplazamiento en la tabla. Usar pantalla: bloque; propiedad para mostrar el elemento de nivel de bloque. Desde que cambiamos la propiedad de visualización de tbody, también debemos cambiar la propiedad para el elemento de anuncio para evitar romper el diseño de la tabla.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Display table with vertical scrollbar
</title>
<style>
table.scrolldown {
width: 100%;
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
/* To display the block as level element */
table.scrolldown tbody, table.scrolldown thead {
display: block;
}
thead tr th {
height: 40px;
line-height: 40px;
}
table.scrolldown tbody {
/* Set the height of table body */
height: 50px;
/* Set vertical scroll */
overflow-y: auto;
/* Hide the horizontal scroll */
overflow-x: hidden;
}
tbody {
border-top: 2px solid black;
}
tbody td, thead th {
width : 200px;
border-right: 2px solid black;
}
td {
text-align:center;
}
</style>
</head>
<body>
<table class="scrolldown">
<!-- Table head content -->
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
</tr>
</thead>
<!-- Table body content -->
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
<body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ChinkitManchanda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA