Вопросы Теги

Таблица с header закрепила с html и css сигара

Хороший я стараюсь делать это это таблица со статическим 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>
5
задан 02.07.2019, 03:26
0 ответов