如何将嵌套的HTML表格对齐到相同的高度

Question

我想将两个嵌套表对齐到相同的高度。它们放在父表中。

HTML：

    <table class="table table-condensed theme-font no-padding no-margin" cellpadding="0" cellspacing="0">
        <tbody>
            <tr class="no-padding no-margin">
                <td class="no-padding no-margin col-xs-6">
                <table class="table table-condensed theme-font no-padding no-margin full-height border" cellpadding="0" cellspacing="0" rules="cols">
                    <thead>
                        <tr>
                            <th class="text-center border col-xs-4">Particulars</th>
                            <th class="text-center border col-xs-2">Amount (Dr.)</th>
                        </tr>
                    </thead>
                    <tbody class="full-height">
                    {% for a, v in pl_debit_ac_dict.iteritems %}
                        <tr>
                            <td class="no-top-bottom-border bold-font text-left">To {{ a }}</td>
                            <td class="no-top-bottom-border bold-font text-right">{{ v|floatformat }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                </td>
                <td class="no-padding no-margin col-xs-6">
                    <table class="table table-condensed theme-font no-padding no-margin full-height border" cellpadding="0" cellspacing="0" rules="cols">
                        <thead>
                            <tr>
                                <th class="text-center border col-xs-4">Particulars</th>
                                <th class="text-center border col-xs-2">Amount (Dr.)</th>
                            </tr>
                        </thead>
                        <tbody class="full-height">
                        {% for a, v in pl_credit_ac_dict.iteritems %}
                            <tr>
                                <td class="no-top-bottom-border bold-font text-left">To {{ a }}</td>
                                <td class="no-top-bottom-border bold-font text-right">{{ v|floatformat }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

我想将左右桌子对齐在同一高度。

bootply

Answer 1

您可以将height = 100%添加到no-margin类，如下所示：

.no-margin{
    margin: 0 !important;
    height: 100%; 
}
.no-padding{
    padding: 0 !important;
}

.border{
    border: 1px solid !important;
}

检查bootply。