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

Ответ 1

table {
    border-collapse: collapse;
}

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

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

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

Ответ 2

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

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

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

Вроде странно, что некоторые из ответов, которые дали люди, предполагали крах-крах: сбой, эффект которого является полной противоположностью того, что задал вопрос.

Ответ 3

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

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

Таблицы

/* по-прежнему нуждаются в cellspacing="0" в разметке */

Ответ 4

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

Ответ 5

Просто вы можете использовать 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>

Ответ 6

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

td {
 padding: 10px 0
}

Надеюсь, это вам поможет! Не унывайте!

Ответ 7

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

Сначала задайте для таблицы только вертикальный интервал границы (например, 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>

Ответ 8

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

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

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

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

Ответ 9

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

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

Ответ 10

Вы также можете просто изменить высоту для каждой строки с помощью 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>, он должен дать вам тот же результат.

Ответ 11

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

Ответ 12

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

float: left

Пример (откройте его в IE9 offcourse:)): http://jsfiddle.net/zshmN/

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

Итак, все те, кто подает голоса, также дайте нам знать правильное решение