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

все, что вам нужно:

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

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

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

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

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

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

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

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

Unit может что-нибудь из этого списка-

Демо-Код-

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 {
 padding: 10px 0
}

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

вот так (я думал, что это невозможно):

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

<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 работает, если вы хотите, чтобы пространство имело тот же цвет фона, что и 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, и оно должно работать

float: left

пример (откройте ее в браузере IE9 конечно. :) ): http://jsfiddle.net/zshmN/

EDIT: это не законное или правильное решение, как указано многими, но если у вас нет выбора и вам нужно что-то, это будет работать в IE9.

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