css - 如何将一张 table 拉伸(stretch)到另一张 table 的高度？

Question

我有两个与我当前代码类似的表格(必须覆盖它们，因为我在其中包含敏感信息):

现在如您所见，右侧的表比左侧的表小得多，因为它的数据较少。我为每个表使用两个不同的数据集，所以我很确定它们必须是分开的。我正在使用 AngularJS，因此这些嵌套的转发器可能会让人感到困惑。这是我的代码:

 <div class="container" >
        <div class="col-sm-8">
        <table class="table table-condensed table-hover table-responsive">
            <thead><tr>
                <th class="col-sm-4">1</th>
                <th class="col-sm-3">2</th>
                <th class="col-sm-3">3</th>
            </tr></thead>
            <tbody ng-repeat="obj in obj">
            <tr ng-repeat="obj2 in obj2">
                <td>
              <!--insert a bunch of ng-repeats and other tds-->
                </td>
            </tr>
            </tbody>
            </table>
        </div>
        <div class="col-sm-4">
            <table class="table table-condensed table-hover table-responsive">
            <thead><tr>
                <th class="col-sm-4">1</th>
                <th class="col-sm-3">2</th>
                <th class="col-sm-3">3</th>
            </tr></thead>
            <tbody ng-repeat="obj in obj">
            <tr ng-repeat="obj2 in obj2">
                <td>
              <!--insert basically the same thing with less data-->
                </td>
            </tr>
            </tbody>
           </table>
        </div>
    </div>

使用 Bootstrap 列确实会将较小的列带到右侧(如预期的那样)，但我无法找到一种方法来使高度与另一个列相同。我希望这些 table 完美地排列在一起，就好像它们是同一张 table 一样。我应该给它们嵌套吗？我不知道该怎么办，希望有人以前处理过这个问题或者可以提供帮助。

提前致谢

Answer 1

您可以使用 jQuery 来实现，计算两个表格的高度，并动态调整一个表格的高度以适应第二个表格。

HTML

<div class="container">
    <div class="col-sm-8">
        <table class="table table-condensed table-hover table-responsive" id="one">
            <thead>
                <tr>
                    <th class="col-sm-4">1</th>
                    <th class="col-sm-3">2</th>
                    <th class="col-sm-3">3</th>
                </tr>
            </thead>
            <tbody ng-repeat="obj in obj">
                <tr ng-repeat="obj2 in obj2">
                    <td>One</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Two</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Three</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Four</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-sm-4">
        <table class="table table-condensed table-hover table-responsive" id="two">
            <thead>
                <tr>
                    <th class="col-sm-4">1</th>
                    <th class="col-sm-3">2</th>
                    <th class="col-sm-3">3</th>
                </tr>
            </thead>
            <tbody ng-repeat="obj in obj">
                <tr ng-repeat="obj2 in obj2">
                    <td>One</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Two</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Three</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

jQuery

$(document).ready(function() {
    var height = Math.max($("#one").height(), $("#two").height());
    $("#one").height(height);
    $("#two").height(height);
});

注意:ids分配给每个表并用jQuery绑定(bind)。

Fiddle Example