Отступ после элемента tr (table-row)

Question

Как сделать отступ после tr, по типу обычного margin, для одного конкретного табличного ряда?

Answer 1

margin - никак. Можно изменить padding. Также можно свободно стилизовать td внутри нужной tr

Answer 2

Вот простая таблица:

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table td {
  border: 1px solid black;
  padding: 10px;
}

<table>
  <tbody>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
  </tbody>
</table>

Сделать отступ после тега tr, который служит контейнером для создания строки таблицы, по типу обычного margin для какой-то одной конкретной табличной строки нельзя, такой возможности в CSS для таблиц не существует.

Но мы можем использовать другие варианты, чтобы добиться нужного нам результата. Структуру HTML при этом мы не трогаем, она у нас остается неизменной. Меняем только стиль CSS. Вот для примера три варианта:

Вариант с Grid:

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table tr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

table td {
  border-top: 1px solid black;
  border-left: 1px solid black;
  padding: 10px;
}

table td:nth-child(3) {
  border-right: 1px solid black;
}

table tr:nth-child(4) td {
  border-bottom: 1px solid black;
}

table tr:nth-child(2) {
  margin-bottom: 20px;
}

table tr:nth-child(2) td {
  border-bottom: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
  </tbody>
</table>

Вариант с Flex:

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table tr {
  display: flex;
  justify-content: center;
}

table td {
  flex: 3 1 auto;
  align-self: flex-start;
  border-top: 1px solid black;
  border-left: 1px solid black;
  padding: 10px;
}

table td:nth-child(3) {
  border-right: 1px solid black;
}

table tr:nth-child(4) td {
  border-bottom: 1px solid black;
}

table tr:nth-child(2) {
  margin-bottom: 20px;
}

table tr:nth-child(2) td {
  border-bottom: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
  </tbody>
</table>

Вариант с inline-block:

table, tbody {
  display: block;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table tr {
  display: block;
  width: 100%;
}

table td {
  display: inline-block;
  width: 33.33%;
  box-sizing: border-box;
  border-top: 1px solid black;
  border-left: 1px solid black;
  padding: 10px;
}

table td:nth-child(3) {
  border-right: 1px solid black;
}

table tr:nth-child(4) td {
  border-bottom: 1px solid black;
}

table tr:nth-child(2) {
  margin-bottom: 20px;
}

table tr:nth-child(2) td {
  border-bottom: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Отступ после элемента tr (table-row)

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