这是我得到的,边界崩溃不起作用:
更新 我的意思是边界崩溃不起作用,你可以清楚地看到内表有一个双边框,看起来不太好。
简化版代码:
<style>
table, tr, td
{
padding:0;
margin:0;
border-collapse: collapse;
}
td
{
border:1px solid black;
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td colspan="3">
<table cellpadding="0" cellspacing="0">
<tr>
<td>Content inner</td>
<td>Content inner</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</table>
答案 0 :(得分:1)
我认为你想要的是单元格的border-left
和border-top
的组合,以及除了表格左边的所有边的边框。然后你使用:first-child
伪选择器去除第一行中单元格的额外border-top
。
border-collapse
的效果与我想象的不同(我知道这并不完全直观)。有关border-collapse
实际执行的操作的示例,请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse。
有关上述技术的示例,请参阅Twitter Bootstrap中的.table-bordered类。我尝试从那里复制并粘贴代码,但它有点散布,而且源代码很少,所以如果你想查看它,最好去Bootstrap主页。 (我之前在这里发布的例子并不是很正确。)