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 {
	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>

每隔一行的CSS边框间距

3 个答案: