2011-01-10 3 views
4

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

Я пробовал с <br>, но это недопустимый код.

После перерыва я попытался добавить верхнюю часть до конца, но она не работает.

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

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

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

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

+0

set border-top? – Cine

+0

Я действительно предпочитаю «пустую» линию. Так что граница - это не то, что нужно. – Pit

ответ

4

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

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

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

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

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

JS Fiddle demo

Хотя есть потенциал, чтобы использовать прозрачные (или background-color -ED границы):

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

1

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

1

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

О проблеме colspan см. Colspan all columns.

Смежные вопросы