每隔一行的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-fiddle與上面的相同：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中，則可以使用大量的盒子模型屬性，例如。保證金。如果您另外隱藏td邊框，則可以使用邊距來設置單元格，行，列之間的間距。

#tab { 
 
\t border-collapse:collapse; 
 
} 
 

 
#tab td{ 
 
\t padding:0px; 
 
} 
 

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

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

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

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