Bueno lo trato de hacer es una tabla con un header estático y su body con scroll horizontal, en su esencia lo he logrado, pero el ancho de cada columna es similar, el ancho de la primera columna ID,Precio,Stock debería ser mas pequeño (adaptándose a su contenido, que simplemente son máximo 4 dígitos).
Ayúdenme con eso por favor, he pensado dando un tamaño solo a las celdas que deben ser mas pequeñas (ID,Precio,Stock), pero creo que estaría mal.
También quisiera que para distintas pantallas se adaptara la altura, pero no puedo hacerlo con porcentajes (lo he tratado pero no he podido, porque creo que debe ser una altura especificada en pixeles). Seria necesario usar media querys?
* {
font-family: arial;
}
.header-fixed {
display: block;
position: relative;
height: 100px;
/*la que necesites*/
max-height: 80vh;
/*la que necesites*/
overflow: auto;
}
.header-fixed thead,
.header-fixed tbody {
display: block;
}
.header-fixed thead {
position: sticky;
display: inline-block;
top: 0;
}
.header-fixed thead tr > th {
background: #212529;
border-color: #32383e;
color: #fff;
margin: auto;
/*padding: 5px 20px 5px 20px;*/
}
.header-fixed tr {
display: flex;
}
.header-fixed th,
.header-fixed td {
min-width: 150px;
/*La que necesites*/
max-width: 150px;
/*La que necesites*/
padding: 0.2em;
}
<table class="header-fixed">
<thead>
<tr>
<th scope='col' class="id">ID</th>
<th scope='col'>Producto</th>
<th scope='col'>Precio</th>
<th scope='col'>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<th scope='row'>1</th>
<td>Producto 1</td>
<td>3</td>
<td class='bag'>
<span class='badge badge-color'>6</span>
</td>
</tr>
<tr>
<th scope='row'>13</th>
<td>Producto 2</td>
<td>3</td>
<td class='bag'>
<span class='badge badge-color'>6</span>
</td>
</tr>
<tr>
<th scope='row'>21</th>
<td>Producto 3</td>
<td>3</td>
<td class='bag'>
<span class='badge badge-color'>6</span>
</td>
</tr>
<tr>
<th scope='row'>...</th>
<td>Producto ...</td>
<td>3</td>
<td class='bag'>
<span class='badge badge-color'>6</span>
</td>
</tr>
</tbody>
</table>