CSS-интервал для каждой строки

Question

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

table{
  border-collapse:separate;
  border-spacing: 0px 3px;
}
td{
    border: 1px solid black;
    padding: 5px;
}

То, чего я хотел бы достичь, это:

CSS

table{
  border-collapse:separate;
}
table tr:nth-of-type(odd){
  border-spacing: 0px 3px;      
}
td{
    border: 1px solid black;
    padding: 5px;
}

HTML

<table>
    <tr>
        <td>a-one</td><td>a-two</td><td>a-three</td>
    </tr>
    <tr>
        <td>a-four</td><td>a-five</td><td>a-six</td>
    </tr>
    <tr>
        <td>b-one</td><td>b-two</td><td>b-three</td>
    </tr>
    <tr>
        <td>b-four</td><td>b-five</td><td>b-six</td>
    </tr>
    <tr>
        <td>c-one</td><td>c-two</td><td>c-three</td>
    </tr>
    <tr>
        <td>c-four</td><td>c-five</td><td>c-six</td>
    </tr>       
</table>

Данные находятся в двух наборах строк и должны быть связаны, тогда как разные наборы должны быть разделены. Я хотел бы сохранить его в виде таблицы, чтобы использовать преимущества ширины автоколонок в браузерах. Кажется, что интервал между границами может быть достигнут только на уровне таблицы. Я уже использую границы для стилизации, поэтому прозрачные границы не являются жизнеспособным вариантом. Есть шанс для меня - или я застрял? JS-скрипка здесь идентична приведенной здесь: http://jsfiddle.net/sSba4/

Answer 1

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

Однако, если вы хотите сохранить все в одной таблице дляпо любой причине вам потребуется ввести несемантическую разметку для создания этих визуальных разделений, поскольку border-spacing является свойством таблицы, а не строки или ячейки.

<table>
    <tr><th></th></tr>
    <tr>
        <td>Apples</td>
        <td>$3.50</td>
    </tr>
    <tr>
        <td>Oranges</td>
        <td>$2.46</td>
    </tr>
    <tr><th></th></tr>
    <tr>
        <td>Pears</td>
        <td>$2.10</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>$3.50</td>
    <tr><th></th></tr>
    <tr>
        <td>Oranges</td>
        <td>$2.46</td>
    <tr>

        <td>Pears</td>
        <td>$2.10</td>
    </tr>
</table>

CSS

table {
  border-collapse:collapse;
}

table tr td {
  border: solid #ccc 1px;
  padding: 5px 7px;
}

table tr th {
  border: none;
  padding-top: 5px;
}

Смотрите это в действии здесь http://jsfiddle.net/wYCNg/

Answer 2

Как насчет добавления дополнительной строки с прозрачными границами?

HTML:

<table>
    <tr><td>a-one</td><td>a-two</td><td>a-three</td></tr>
    <tr><td>a-four</td><td>a-five</td><td>a-six</td></tr>
    <tr class="break"><td colspan="3"></td></tr>
    <tr><td>b-one</td><td>b-two</td><td>b-three</td></tr>
    <tr><td>b-four</td><td>b-five</td><td>b-six</td></tr>
    <tr class="break"><td colspan="3"></td></tr>
    <tr><td>c-one</td><td>c-two</td><td>c-three</td></tr>
    <tr><td>c-four</td><td>c-five</td><td>c-six</td></tr>  
</table>

CSS:

table{
    border-collapse:collapse;
}
td{
    border: 1px solid black;
    padding: 5px;
}
tr.break, tr.break td{
    border:none;
    height:5px;
    padding:0;
}

Answer 3

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

#tab {
	border-collapse:collapse;
}

#tab td{
	padding:0px;
}

#tab td>div {
	width:50px;
	height:50px;
	background-color:#97FFF8;
	margin:1px;
}

#tab td:nth-child(1)>div {
	margin-right:10px;
}

#tab tr:nth-child(1) div {
	margin-bottom:10px;
}

<table id="tab">
	<tbody>				
		<tr>
			<td><div></div></td>
			<td><div></div></td>
			<td><div></div></td>
			<td><div></div></td>
			<td><div></div></td>
		</tr>
		
		<tr>
			<td><div></div></td>
			<td><div></div></td>
			<td><div></div></td>
			<td><div></div></td>
			<td><div></div></td>
		</tr>
		
		<tr>
			<td><div></div></td>
			<td><div></div></td>
			<td><div></div></td>
			<td><div></div></td>
			<td><div></div></td>
		</tr>
	</tbody>
</table>