Question

JS Fiddle位于此处：http://jsfiddle.net/apyh2b4x/它正在使用Twitter Bootstrap，就像我在我的项目中一样。

HTML代码非常简单，它的要点是table内有table：

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

我想知道的是，这两个表的borders是否可能collapse，与同一个表中两个联合单元格的borders崩溃的方式相同？

Answer 1

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

如果是后者（或两者），那就非常简单了：

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

}

见这里：fiddle

Answer 2

请尝试以下操作： Demo

CSS：

.table {
    border-collapse:collapse !important;
    padding: 0px 0px !important;
    margin:0 !important;
    text-indent:10px;
}
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
    padding: 0px 0px !important;
    border-top:none;
    line-height:30px;
    vertical-align:middle;
}

HTML：

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

如果我在桌子内有桌子，他们的边框会崩溃吗？

2 个答案: