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

Question

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

Я пытаюсь

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

В css:

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

Answer 4

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

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

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

Answer 5

Из Сети разработчиков 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> */

UPDATE

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

Answer 6

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

HTML:

<tr class="separator" />

CSS:

table tr.separator { height: 10px; }

Answer 7

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

Answer 8

Вам необходимо установить 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>

Answer 9

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

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

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

Answer 10

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

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