Как сделать таблицу HTML с нестандартной структурой?

Question

как сделать таблицу с такой структурой? Не могу догнать самостоятельно, буду рад любой помощи введите сюда описание изображения

Answer 1

Руководство

Таблицы в HTML. Как оформить нужную таблицу.

Ответ

Вот собственно конструкция таблицы. Стили добавьте сами.

<body>
  <style>
    td:not([colspan]) {
      border: 1px solid black;
    }
  </style>
  <table>
    <thead>
      <tr>
        <th>Продукты</th>
        <th>Количество брутто</th>
        <th>Количество нетто</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="3">Бисквит</td>
      </tr>
      <tr>
        <td>Яйцо</td>
        <td>3шт</td>
        <td>250</td>
      </tr>
      <tr>
        <td>Сухая глюкоза</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr>
        <td>Мука слаюая</td>
        <td>50</td>
        <td>55</td>
      </tr>
      <tr>
        <td colspan="3"><button>Добавить продукт</button></td>
      </tr>
    </tbody>
  </table>
</body>

Answer 2

Судя по комментарию на ответ выше, вы используете не табличную верстку. Так по чему бы вам не сделать так?

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    padding: 20px;
}

.block {
    margin-bottom: 20px;
}

.block__title {
    margin-bottom: 20px;
}

.block__item {
    display: flex;
    align-items: center;
    margin: 0 -10px 10px;
}

.block__item:last-of-type {
    margin-bottom: 0;
}

.block__name,
.header__name {
    width: calc(60% - 20px);
}

.block__qvB,
.block__qvN,
.header__qvB,
.header__qvN {
    width: calc(20% - 20px);
}

.block__qvB,
.block__qvN,
.block__name {
    border: 1px solid black;
    border-radius: 20px;
    min-height: 40px;
    padding: 10px;
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.header {
    display: flex;
    align-items: center;
    background: greenyellow;
    margin: 0 -10px 20px;
    padding: 10px 0;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.header__name,
.header__qvB,
.header__qvN {
    margin: 0 10px;
}

<body>
    <div class="header">
        <div class="header__name">Продукты</div>
        <div class="header__qvB">Кол-во</div>
        <div class="header__qvN">Кол-во</div>
    </div>
    <div class="block">
        <div class="block__title">Бисквит</div>
        <div class="block__item-wrap">
            <div class="block__item">
                <div class="block__name">Яицо</div>
                <div class="block__qvB">3шт</div>
                <div class="block__qvN">250</div>
            </div>
            <div class="block__item">
                <div class="block__name"></div>
                <div class="block__qvB"></div>
                <div class="block__qvN"></div>
            </div>
            <div class="block__item">
                <div class="block__name"></div>
                <div class="block__qvB"></div>
                <div class="block__qvN"></div>
            </div>
        </div>
    </div>
    <div class="block">
        <div class="block__title">Крем</div>
        <div class="block__item-wrap">
            <div class="block__item">
                <div class="block__name">Яицо</div>
                <div class="block__qvB">3шт</div>
                <div class="block__qvN">250</div>
            </div>
            <div class="block__item">
                <div class="block__name"></div>
                <div class="block__qvB"></div>
                <div class="block__qvN"></div>
            </div>
            <div class="block__item">
                <div class="block__name"></div>
                <div class="block__qvB"></div>
                <div class="block__qvN"></div>
            </div>
        </div>
    </div>
</body>

БЛОГ НА HUSL

Как сделать таблицу HTML с нестандартной структурой?

Ответы (2 шт):

Руководство

Ответ