Как стилизовать таблицу?

Question

Каким образом можно стилизовать таблицу таким образом. Нужно некоторые строки объединять (группировать и выделять таким вот образом.

Искал в гугле, задавал вопрос в chat gpt) не нашел ответа(

Answer 1

Вот такая таблица на grid

body {
  background-color: black;
}
div {
  display: block;
  box-sizing: border-box;
}
.table {
  border-radius: 15px 15px 0 0;
  border: 1px solid #B5D6E4;
  height: 100%;
  overflow: hidden;
}
.thead, .tRow {
  display: grid;
}
.thead {
  grid-template-columns: 50px 200px 1fr;
  background-color: #B5D6E4;
  font-size: 20px;
  color: black;
  margin-bottom: 10px;
}
.thead > div {
  padding: 10px;
  border-right: 1px solid blue;
}
.thead > div:last-child {
  border-right: none;
}
.tRow {
  grid-template-columns: 45px 200px 1fr;
  border-bottom: 1px solid white;
}
.tRow:last-child {
  border-bottom: none;
}
.tRow > div {
  padding: 5px 10px;
  border-right: 1px solid white;
}
.tRow > div:last-child {
  border-right: none;
}
.delimiter {
  background-color: #1D51D6;
  color: white;
  font-size: 14px;
  border-radius: 10px;
  margin: 0 5px 10px;
}

<div class="table">
  <div class="thead">
    <div class="num">ID</div>
    <div class="name">Name</div>
    <div class="desc">Description</div>
  </div>
  <div class="delimiter">
    <div class="tRow">
      <div class="num">12</div>
      <div class="name">Some Name</div>
      <div class="desc">Some Description</div>
    </div>
    <div class="tRow">
      <div class="num">13</div>
      <div class="name">Some Name</div>
      <div class="desc">Some Description</div>
    </div>
    <div class="tRow">
      <div class="num">14</div>
      <div class="name">Some Name</div>
      <div class="desc">Some Description</div>
    </div>
  </div>
  <div class="delimiter">
    <div class="tRow">
      <div class="num">15</div>
      <div class="name">Some Name</div>
      <div class="desc">Some Description</div>
    </div>
  </div>
  <div class="delimiter">
    <div class="tRow">
      <div class="num">16</div>
      <div class="name">Some Name</div>
      <div class="desc">Some Description</div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как стилизовать таблицу?

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