Как разделить два tr в HTML-таблице

Question

Есть ли возможность иметь визуальный разделитель между двумя строками (tr) в таблице HTML.

Я пытался использовать <br>, но это неверный код.

Я пытался добавить верхний слой в tr после перерыва, но он не работает.

В настоящее время я использую пустую строку:

<tr><td colspan=\"X\">&nbsp;</td></tr>

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

Есть ли способ решить эту проблему?

Answer 1

Отредактировано , чтобы отразить мое перечитывание вопроса, а не заголовок вопроса (первоначальный ответ остается ниже правила).

Если вы хотитевизуальный разделитель (а не просто пробел), затем просто используйте:

td {
border-bottom: 1px solid #ccc; /* or whatever specific values you prefer */
}

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

td {
    padding: 0.5em 1em;
    border: 1px solid #ccc;
}

Демонстрация JS Fiddle

Хотя существует возможность использования прозрачных (или background-color -области):

table {
    border-collapse: separate;
}

td {
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
}

td:hover {
    border-color: #ccc;
}

JS Fiddle demo

Answer 2

На самом деле, я использую отдельные tr s для этой цели все время. Я оформляю их (например, один внутри) через класс-разделитель.

О проблеме colspan см. Свернуть все столбцы .

Answer 3

Элемент <tr /> не поддерживается во всех браузерах, однако вы всегда можете добавить отступы или нижнюю границу для ячеек в tr.