Пространство между двумя строками в таблице?

Question

Возможно ли это через CSS?

Я пытаюсь

tr.classname {
  border-spacing: 5em;
}

безрезультатно. Может я что-то не так делаю?

Answer 1

Посмотрите на border-collapse: отдельный атрибут (по умолчанию) и свойство border-spacing .

Сначала необходимо отделить их с помощью border-collapse , затем вы можете определить пространство между столбцами и строками с помощью border-spacing .

Оба эти свойства CSS на самом деле хорошо поддерживаются в каждом браузере, см. Здесь .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Answer 2

tr { 
    display: block;
    margin-bottom: 5px;
}

Answer 3

Для создания иллюзии расстояния между рядами примените к строке цвет фона, а затем создайте толстую рамку белого цвета, чтобы создать «пробел»:)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Answer 4

Слишком поздний ответ:)

Если вы примените float к tr элементам, вы можете поместить пробел между двумя строками с атрибутом margin.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Answer 5

Я наткнулся на это, борясь с подобной проблемой. Я нашел ответ Варуна Натраджа весьма полезным, но вместо этого я бы использовал прозрачную рамку.

td { border: 1em solid transparent; }

Прозрачные границы по-прежнему имеют ширину.

Answer 6

Правильный способ дать интервал для таблиц - использовать cellpadding и cellspacing, например.

<table cellpadding="4">

Answer 7

Работает для большинства последних браузеров в 2015 году. Простое решение. Это не работает для прозрачности, но в отличие от ответа Торонвена, я не могу получить прозрачность для рендеринга с любым размером.

    tr {
      border-bottom:5em solid white;
    }

Answer 8

Просто поместите div в td и установите следующие стили div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Answer 9

Я понимаю, что это ответ на старый поток и, возможно, не запрашиваемое решение, но хотя все предложенные решения не сделали то, что мне нужно, это решение работало для меня.

У меня было 2 ячейки таблицы, одна с цветом фона, другая с рамкой. Вышеуказанные решения убирают границу, поэтому ячейка справа, казалось бы, плавает в воздухе. Решение, которое сделало трюк, состояло в том, чтобы заменить table, tr и td на div и соответствующие классы: table будет div id="table_replacer", tr будет div class="tr_replacer", а td будет div class="td_replacer" (закрытие изменения теги в div тоже очевидно)

Чтобы получить решение моей проблемы, css:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Надеюсь, это кому-нибудь поможет.

Answer 10

Здесь это работает гладко:

#myOwnTable td { padding: 6px 0 6px 0;}

Полагаю, вы могли бы разработать более детальный макет, указав, какой тд при необходимости.