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

时间:2013-05-27 05:55:58

标签: html css

这是我得到的,边界崩溃不起作用:

enter image description here

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

简化版代码:

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

1 个答案:

答案 0 :(得分:1)

我认为你想要的是单元格的border-leftborder-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主页。 (我之前在这里发布的例子并不是很正确。)