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

Это возможно через CSS?

Я пытаюсь

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

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

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

В приведенном ниже коде CSS знак «больше чем» означает, что заполнение применяется только к tdэлементам, которые являются прямыми дочерними trэлементами для элементов класса spaceUnder. Это позволит использовать вложенные таблицы. (Ячейки C и D в примере кода.) Я не слишком уверен в поддержке браузером прямого дочернего селектора (думаю, IE 6), но он не должен нарушать код в любых современных браузерах.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Это должно выглядеть примерно так:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

В родительской таблице попробуйте установить

border-collapse:separate; 
border-spacing:5em;

Плюс декларация границы, и посмотрите, достигнет ли это желаемого эффекта. Однако следует помнить, что IE не поддерживает модель «разделенных границ».

У вас есть таблица с альбомами идентификаторов с любыми данными ... Я опустил trs и tds

<table id="albums" cellspacing="0">       
</table>

В css:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

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

<tr class="spacer"><td></td></tr>

затем используйте css для придания строкам распорок определенной высоты и прозрачного фона.

Из Сети разработчиков Mozilla :

CSS-свойство border-spacing определяет расстояние между границами соседних ячеек (только для модели с разделенными границами). Это эквивалентно атрибуту cellspacing в презентационном HTML, но необязательное второе значение может использоваться для установки разного расстояния по горизонтали и вертикали.

Эта последняя часть часто контролируется. Пример:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

ОБНОВИТЬ

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

Приведенный ниже пример показывает, как вы можете сделать так, чтобы таблица выглядела так, будто таблица существует из отдельных строк, полноценная сладость CSS. Также дал первый ряд больше расстояния сtbody настройкой. Не стесняйтесь использовать!

Уведомление о поддержке: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Вы можете попробовать добавить строку разделителя:

HTML:

<tr class="separator" />

CSS:

table tr.separator { height: 10px; }

Вы не можете изменить поля ячейки таблицы. Но вы можете изменить отступы. Измените отступы TD, чтобы увеличить ячейку и оттолкнуть текст в сторону с увеличенными отступами. Однако, если у вас есть границы, это все равно не будет именно тем, что вы хотите.

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

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

Оба эти свойства 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>

Хорошо, вы можете сделать

tr.classname td {background-color:red; border-bottom: 5em solid white}

Убедитесь, что цвет фона установлен на тд, а не на строку. Это должно работать в большинстве браузеров ... (Chrome, т.е. & ff протестировано)

Вам нужно установить border-collapse: separate;на стол; большинство стилей браузеров по умолчанию начинаются с того border-collapse: collapse;, что ограничивает интервал границ.

Кроме того, интервал между границами: идет TD, а не TR.

Пытаться:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Вы можете использовать высоту строки в таблице:

<table style="width: 400px; line-height:50px;">

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

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

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

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

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

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

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

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

<table cellpadding="4">

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

td { border: 1em solid transparent; }

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

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

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

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

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

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

У меня было 2 ячейки таблицы, одна с цветом фона, другая с цветом рамки. Вышеуказанные решения убирают границу, поэтому ячейка справа, казалось бы, плавает в воздухе. Решение, которое сделало трюк, состояло в том table, чтобы заменить , trи tdс divs и соответствующими классами: таблица будет 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;}

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

Вы можете заполнить элементы <td /> элементами <div /> и применить любое поле к тем элементам div, которые вам нравятся. Для визуального пространства между строками вы можете использовать повторяющееся фоновое изображение для элемента <tr />. (Это было решение, которое я только что использовал сегодня, и оно работает как в IE6, так и в FireFox 3, хотя я больше не тестировал его.)

Кроме того, если вы не хотите изменять свой серверный код, чтобы помещать <div /> s внутри <td /> s, вы можете использовать jQuery (или что-то подобное) для динамического переноса содержимого <td /> в <div / >, что позволяет применять CSS по желанию.

Или просто добавьте пробел с высотой поля между строками, который вы хотите добавить интервал

Вот простое и элегантное решение с несколькими оговорками:

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

Имея это в виду, попробуйте это:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

То, что вы на самом деле делаете, это наклеивает прямоугольник ::before блок в верхнюю часть всех ячеек в строке, которой вы хотите предшествовать пробел. Эти блоки немного торчат из ячеек, перекрывая существующие границы, скрывая их. Эти блоки представляют собой только верхнюю и нижнюю границу, зажатую вместе: верхняя граница образует зазор, а нижняя граница создает вид исходной верхней границы ячеек.

Обратите внимание, что если у вас есть рамка вокруг самой таблицы, а также ячеек, вам нужно будет еще больше увеличить горизонтальное поле ваших «блоков». Так что для границы таблицы 4px вы бы вместо этого использовали:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

И если ваша таблица использует border-collapse:separateвместо border-collapse:collapse, то вам нужно (а) использовать полную ширину границы таблицы:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... а также (b) замените двойную ширину границы, которая теперь должна появиться ниже разрыва:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

Техника легко адаптируется к версии .gapafter, если вы предпочитаете, или к созданию вертикальных (столбцовых) пропусков вместо пропусков строк.

Вот кодекс, где вы можете увидеть его в действии: https://codepen.io/anon/pen/agqPpW

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

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

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

делать это показано выше ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

удаляет вертикальное выравнивание столбцов, поэтому будьте осторожны при использовании

Ты пытался:

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

Кроме того, каждый тд может быть скорректирована:

td.classname { margin-bottom:5em; }

или

 td.classname { padding-bottom:5em; }