我的目标是 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>
数据在两个行集合中,需要连接起来,而不同的集合需要分开。我想以表格形式保留它以利用浏览器的自动列宽。似乎 border-spacing 只能在表格级别实现。我已经在使用边框来设置样式,因此透明边框不是一个可行的选择。 我有机会吗-或者我被困住了? 这里的 JS-fiddle 与上面相同:http://jsfiddle.net/sSba4/
最佳答案
我认为,如果数据需要在单独的容器中进行可视化分块,也许最语义化的解决方案将涉及使用多个表。
但是,如果出于某种原因你想将所有内容都保存在一个表中,那么你需要引入非语义标记来创建这些视觉分隔,因为 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/
关于html - 每隔一行的 CSS 边框间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8704183/