边框折叠无法在嵌套表上工作

Question

这是我得到的，边界崩溃不起作用：

更新 我的意思是边界崩溃不起作用，你可以清楚地看到内表有一个双边框，看起来不太好。

简化版代码：

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

Answer 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主页。 （我之前在这里发布的例子并不是很正确。）