Css 如果我在一张桌子里放一张桌子，它们的边界会塌陷吗？

JS Fiddle位于这里：它使用Twitter引导，我也在我的项目中

HTML代码非常简单，其要点是在

表中有一个
表
：

<div style="padding:20px;">
    <table class="table table-bordered">
        <tr>
            <td>Outside label</td>
            <td>
                <table class="table table-bordered">
                    <tr>
                        <td>Inside label 1</td>
                        <td>Inside label 2</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>


外部标签
内标签1
内标签2

我想知道的是，这两个表的
边框
是否有可能折叠

，就像同一个表中两个关节单元的

边框

折叠一样

像这样试试：

CSS:

HTML:

外部标签
内标签1
内标签2

您是要折叠边框还是删除填充和边距

如果是后者（或两者兼而有之），则非常简单：

table{
    border-collapse:collapse;
}
table, tr, td{
    padding:0 !important;
    margin:0 !important;

}

---

请参见此处：

这不是折叠的，只是移除了填充物。查看最后两个单元格如何具有重复的边框（好像它是

2px

边框）？折叠它们将使其成为单个

1px

边框。这就是我想知道的，是否有可能把桌子放在桌子里。因为同一个表中的单元格可能会折叠边框（这是默认引导的

.table

行为）。啊，在这种情况下，我认为这是不可能的。我想你所能做的就是完全删除表内的边框，然后再添加回你想要的边框。。。比如：tbh。。。表中的表不是一个好主意，imhoCollapse似乎不起作用，但对于@will jenkins之前的评论，这里有一个优雅的解决方案（添加所有边框，然后删除内部表的外部边框）。简言之，这将为

表tr:first child td

，

表tr td:first child

等设置css。

<div style="padding:20px;">
    <table class="table table-bordered table-condensed">
        <tbody>
            <tr>
                <td>Outside label</td>
                <td>
                    <table class="table table-bordered">
                        <tr>
                            <td>Inside label 1</td>
                            <td>Inside label 2</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

table{
    border-collapse:collapse;
}
table, tr, td{
    padding:0 !important;
    margin:0 !important;

}