Хороший я стараюсь делать это это таблица со статическим header и Вашим body с scroll горизонтально, в Вашей сущности я этого добился, но ширина каждой колонны сходная, ширина первой колонны идентификации, Цены, Запас должен бы быть более маленьким (приспосабливаясь к Вашему контенту, который просто максимальные 4 цифры).
Помогите мне с этим пожалуйста, я подумал давая одинокий размер ячейкам, которые должны быть более маленькими (идентификация, Цена, Запас), но думаю, что он был бы плохой.
Также я хотел бы, чтобы для различных экранов приспособили высоту, но я не могу делать это с процентным содержанием (я отнесся к этому, но не смог, потому что я думаю, что это должна быть высота, определенная в пикселях). Было бы необходимым использовать средний показатель 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>