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

Возможно ли это с помощью CSS?

Я пытаюсь

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

безрезультатно. Может быть, я делаю что-то неправильно?

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

В css:

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

Ответ 4

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

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

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

Ответ 5

Из Mozilla Developer Network:

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

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

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

UPDATE

Теперь я понимаю, что 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>

Ответ 6

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

HTML:

<tr class="separator" />

CSS

table tr.separator { height: 10px; }

Ответ 7

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

Ответ 8

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

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

Try:

<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>

Ответ 9

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

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

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

Ответ 10

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

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

Ответ 11

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

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

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

Ответ 12

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

Ответ 13

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

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

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

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

Ответ 14

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

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

Ответ 15

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

<table cellpadding="4">

Ответ 16

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

td { border: 1em solid transparent; }

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

Ответ 17

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

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

Ответ 18

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

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

Ответ 19

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

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

Чтобы получить решение для моей проблемы, 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;}

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

Ответ 20

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

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

Ответ 21

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

Ответ 22

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

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

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

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 top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

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

Обратите внимание, что если у вас есть граница вокруг самой таблицы, а также ячеек, вам нужно будет еще больше увеличить горизонтальный -ve край ваших "блоков". Так что для границы таблицы 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 bottom border */

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

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

Ответ 23

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

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

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

Ответ 24

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

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

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

Ответ 25

Вы пробовали:

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

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

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

или

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