Как правильно сделать мини табличку с 3-мя полями?

Рейтинг: 0Ответов: 1Опубликовано: 28.06.2023

Есть вот такая небольшая табличка

введите сюда описание изображения

Как создать правильную структуру этой таблицы, чтобы все отображалось корректно? Моя структура и код:

.calc-table{
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.calc-name-block{
  color: rgba(37, 40, 53, 0.50);
  font-size: 15px;
  font-family: Roboto;
  line-height: 23px;
  margin-bottom: 26px;
}
.calc-name-block:last-child{
  margin-bottom: 0; 
}
.calc-cost-block{
  color: rgba(37, 40, 53, 0.50);
  font-size: 12px;
  font-family: Roboto;
  line-height: 23px;
  width: 125.742px;
  padding: 6px 94px 12px 18px;
  border-radius: 2px;
  background: #FAFAFA;
}
.calc-price-block{
  color: rgba(37, 40, 53, 0.50);
  font-size: 12px;
  font-family: Roboto;
  line-height: 23px;
  width: 125.742px;
  padding: 6px 26px 12px 18px;
  border-radius: 2px;
  background: #FAFAFA;
}
                <div class="calc-table">
                    <div class="calc-names">
                        <p class="calc-name-block">Slave8</p>
                        <p class="calc-name-block">Slave8</p>
                        <p class="calc-name-block">Slave8</p>
                        <p class="calc-name-block">Slave8</p>
                    </div>
                    <div class="calc-cost">
                        <span>Стоимость</span>
                        <p class="calc-cost-block">5</p>
                        <p class="calc-cost-block">5</p>
                        <p class="calc-cost-block">5</p>
                        <p class="calc-cost-block">5</p>
                    </div>
                    <div class="calc-price">
                        <span>Количество</span>
                        <p class="calc-price-block">25 900  ₽ </p>
                        <p class="calc-price-block">25 900  ₽ </p>
                        <p class="calc-price-block">25 900  ₽ </p>
                        <p class="calc-price-block">25 900  ₽ </p>
                    </div>
                </div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Вот так будет правильно. P.S. CSS уже сами подгоните, как Вам надо... т.е. цвет ячеек, шрифт и т.д.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style type="text/css">
    table {
      width: 300px;
      height: 150px;
      border: none;
    }
    th, td {
      font-family: Roboto;
      font-size: 12px;
      line-height: 23px;
    }
    td:nth-child(n+2) {
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th></th>
      <th>Количество</th>
      <th>Стоимость</th>
    </tr>
    <tr>
      <td>Slave8</td>
      <td>5</td>
      <td>25 900</td>
    </tr>
    <tr>
      <td>Slave40</td>
      <td>15</td>
      <td>350 000</td>
    </tr>
    <tr>
      <td>Master</td>
      <td>59</td>
      <td>1 120 000</td>
    </tr>
    <tr>
      <td>Замок</td>
      <td>100</td>
      <td>500 897</td>
    </tr>
  </table>
</body>
</html>