CSS: как создать промежуток между строками в таблице?

Это означает, что итоговая таблица будет выглядеть менее так:

[=== ROW ===]
[=== ROW ===]
[=== ROW ===]
[=== ROW ===]

... и так далее:

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

Я пробовал добавить

margin-bottom:1em;

к td и tr, но ничего не получил. Любые идеи?

Все, что тебе нужно:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

Это предполагает, что вам нужен вертикальный зазор 1em, а не горизонтальный. Если вы делаете это, вам, вероятно, также следует подумать об управлении высотой строки.

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

table {
    border-collapse: collapse;
}

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

Ячейки ни на что не отреагируют, если вы сначала не установите border-collapse. Вы также можете добавить границы к элементам TR после того, как они будут установлены (среди прочего).

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

Если ни один из других ответов не является удовлетворительным, вы всегда можете просто создать пустую строку и соответствующим образом стилизовать ее с помощью CSS, чтобы она была прозрачной.

Если у вас нет границ или есть границы и вам нужен интервал внутри ячеек, вы можете использовать padding, или line-height. Насколько мне известно, маржа не влияет на ячейки и строки.
Свойство CSS для интервала между ячейками:border-spacing , но оно не работает в IE6 / 7 (поэтому вы можете использовать его в зависимости от вашей аудитории).

Если ничего не помогает, вы можете использовать старый cellspacingатрибут в разметке, но это также даст вам интервал между столбцами. Некоторые сбросы CSS предлагают вам все равно установить его, чтобы получить кроссбраузерную поддержку:

/ * таблицы все еще нуждаются cellspacing="0"в разметке * /

Вот способ (я думал, что это невозможно):

Сначала задайте для таблицы только вертикальный интервал границ (например, 5 пикселей) и установите для него горизонтальный интервал границы равным 0. Затем вы должны задать правильные границы для каждой ячейки строки. Например, самая правая ячейка в каждой строке должна иметь границу сверху, снизу и справа. Крайние левые ячейки должны иметь границы сверху, снизу и слева. И другие ячейки между этими двумя должны иметь границу только сверху и снизу. Как этот пример:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

На мой взгляд, самый простой способ - добавить к тегу отступы.

td {
 padding: 10px 0
}

Надеюсь, что это поможет вам! Ура!

Просто можешь использовать padding-topи padding-bottomна tdэлементе.

Единица может что угодно из этого списка:

Демо-код:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

отступ в TD работает, если вы хотите, чтобы пространство имело тот же цвет фона, что и td

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

применив этот стиль к одной ячейке, я смог получить желаемое разделение. Не было необходимости добавлять его ко всем ячейкам ... Возможно, не САМЫЙ элегантный, но, возможно, более элегантный, чем строки-разделители.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

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

Вы можете использовать div, чтобы избежать этой сложности. Просто дайте маржу каждому div.

Вы также можете просто изменить высоту каждой строки с помощью CSS.

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

Вы также можете изменить высоту <td>элемента, это должно дать вам тот же результат.

Создайте еще один <tr>чуть ниже и добавьте немного места или высоты к содержимому<td>

Например, проверить скрипку

https://jsfiddle.net/jd_dev777/wx63norf/9/

Добавьте следующее правило в tr, и оно должно работать

float: left

Образец (откройте его в IE9 вне курса :)): http://jsfiddle.net/zshmN/

РЕДАКТИРОВАТЬ: это не законное или правильное решение, как указывали многие, но если у вас нет выбора и вам что-то нужно, это будет работать в IE9.

Так что всем, кто голосует, дайте нам знать и правильное решение.