This http://codepen.io/morewry/pen/GnBFu http://codepen.io/morewry/pen/GnBFu is about as close as I can get. I suspect there will be some support issues and the alignment of the cells is off by the amount of the border-spacing
.
table{
table-layout:fixed;
border-collapse:separate;
border-spacing:0.25em;
border:1px solid red;
}
tr{
display:block;
border-bottom:1px dashed blue;
}
tr:last-child{ border:0; }
td{
padding-right:0.25em;
vertical-align:top;
border:1px dotted orange;
border-width:0 1px;
}
td:first-child,
td + td{ border-left:0; }
td:last-child{ padding-right:0; border-right:0; }
Edit
重新阅读后,我意识到您并不是在单个表格中寻找分隔的边框,而只是为了抑制嵌套表格上单元格之间的边框以外的边框。这样就简单多了http://codepen.io/morewry/pen/yxvGg http://codepen.io/morewry/pen/yxvGg:
table{
table-layout:fixed;
border-collapse:collapse;
border-spacing:0;
border-style:hidden;
}
td{
padding:0.25em;
border:1px solid black;
}
边框冲突解决方案规定 border-style:hidden 优先,因此折叠模型中唯一出现的边框位于单元格之间。
这里唯一的问题是 IE 不支持隐藏,因此对于 IE 您需要解决方法。伪类应该适用于 IE8。我认为 IE7 不支持 :last-child,因此它需要一些额外的帮助,而 IE6 则需要针对 :first-child 和 :last-child 的解决方法。
对于IE8和IE7,下面将模拟border:hidden
table{ border:2px solid transparent; }
在这些浏览器中,您会获得 2 个额外像素的透明空间,但效率更高。我记得 IE6 并不能正确支持透明边框,它仍然会有问题。看http://codepen.io/morewry/pen/bIvJa http://codepen.io/morewry/pen/bIvJa.