每隔一行的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>