我需要对齐大小相等的表格（引导程序）答案

【问题标题】：I need to align tables with equal sizes (Bootstrap)我需要对齐大小相等的表格（引导程序）
【发布时间】：2018-02-14 00:41:21
【问题描述】：

我需要制作 2 个垂直对齐的表格。

所以我做了2个div，一个是“col-lg-10”，另一个是“col-lg-5”

我认为它完全适用于 1-Table 和 Half-Table

但它并不完全有效，它有点不同。

[col-lg-10 / col-lg-5] ，我认为 10 正好是 5 的一半值....

为什么它不起作用？

<div class="table-responsive col-lg-10">
    <table class="table table-bordered">
        <tr>
            <td class="col-lg-1">ABC</td>
            <td class="col-lg-1">DEF</td>
            <td class="col-lg-2" style="word-break:break-all">FGGFGGFGGFGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGG</td>
            <td class="col-lg-1">342</td>
            <td class="col-lg-1">ABc</td>
            <td class="col-lg-1">DDF</td>
            <td class="col-lg-1">AvV</td>
            <td class="col-lg-1">DXZ</td>
            <td class="col-lg-1">QQW</td>
        </tr>
    </table>
</div>

<div class="table-responsive col-lg-5">
    <table class="table table-bordered">
        <tr>
            <td class="col-lg-2">ABC</td>
            <td class="col-lg-3">DEF</td>
        </tr>
    </table>
</div>

Result ScreenShot

【问题讨论】：

您的列需要在行元素中。
删除 cols-lg-5 右侧的装订线：.table-responsive.col-lg-5 {padding-right:0;}bootply.com/gSfrG4Ye2C
此外，列类不是通用的大小调整实用程序。它们旨在与其他网格类一起使用。就像前面提到的.row 类以及他们有像@Pete 提到的排水沟（填充）的事实。它们并不意味着调整表格列和表格的大小（至少是您期望的方式）。列大小适用于列，它们有一个装订线。
谢谢大家，你们的cmets太有用了，非常感谢！！

标签： html css twitter-bootstrap-3

【解决方案1】：

check the image this is regarding col*

这里是修正后的代码，您可以根据需要更改偏移值

<div class="row">
    <div class="col-lg-10 col-md-10 col-md-10 offset-sm-1 col-sm-offset-2 col-md-offset-2">
<div class="table-responsive">
    <table class="table table-bordered">
        <tr class=row>
            <td class="col-lg-1">ABC</td>
            <td class="col-lg-1">DEF</td>
            <td class="col-lg-2" style="word-break:break-all">FGGFGGFGGFGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGG</td>
            <td class="col-lg-1">342</td>
            <td class="col-lg-1">ABc</td>
            <td class="col-lg-1">DDF</td>
            <td class="col-lg-1">AvV</td>
            <td class="col-lg-1">DXZ</td>
            <td class="col-lg-1">QQW</td>
            <td class="col-lg-1">QQW</td>
            <td class="col-lg-1">QQW</td>
        </tr>
    </table>
</div>
</div>
<div class="col-lg-5 offset-sm-4 ">
<div class="table-responsive">
    <table class="table table-bordered">
        <tr>
            <td class="col-lg-2">ABC</td>
            <td class="col-lg-3">DEF</td>
        </tr>
    </table>
</div>
</div>
</div>

【讨论】：