Tabla HTML con 100% de ancho, con desplazamiento vertical dentro del cuerpo
¿Cómo puedo configurar para<table>
100% de ancho y solo poner dentro.<tbody>
desplazamiento vertical para alguna altura?
table {
width: 100%;
display:block;
}
thead {
display: inline-block;
width: 100%;
height: 20px;
}
tbody {
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
Quiero evitar agregar algunos div adicionales, todo lo que quiero es una tabla simple como esta y cuando intento cambiar,table-layout
, position
y muchas más cosas en la tabla CSS que no funcionan bien con un 100% de ancho solo con un ancho fijo en px.