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

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

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

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

Попытался ли ты:

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

В качестве альтернативы, каждый td также можно настроить:

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

или же

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

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

Вам необходимо использовать отступы в ваших элементах 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 |
+---+---+

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

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

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

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

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

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

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

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

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

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

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

затем используйте css, чтобы дать промежуточным рядам определенную высоту и прозрачный фон.

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

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

В css:

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

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

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

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

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

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

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

html:

<tr class = "separator" />

css:

table tr.separator { height: 10px; }

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

<table cellpadding = "4">

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

Кроме того, border-spacing: используется для 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>

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

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

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

td { border: 1em solid transparent; }

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

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

У меня было 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;}

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

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

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

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

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

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

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

За этой последней частью часто следят. Пример:

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

ОБНОВИТЬ

Теперь я понимаю, что OP хочет, чтобы определенные, отдельные строки имели увеличенный интервал. Я добавил настройку с элементами 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>

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

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

Здесь это работает плавно:

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

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

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

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

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

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

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

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

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

Лучший способ - добавить tr между двумя tr, как показано ниже,

<tr>
 <td height = "5" colspan = "2"></td>
</tr>