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>

使用引导列确实会使较小的一列（如预期的那样），但我无法找到一种方法可以使高度与另一个相同。我希望表格完美排列，好像它们是同一张桌子。我应该筑巢吗？我不知道该怎么做，并且希望有人在此之前处理过这个问题或者可以提供帮助。

提前致谢

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绑定。

Fiddle Example

Answer 2

使用jQuery，您可以设置保存两个表的高度的变量（以像素为单位）。然后你可以直接添加css，它将改变目标表的高度以匹配另一个表。

这种方法使您可以灵活地使表格成为百分比高度，因此它不必是固定的高度，并且可以缩放。在这种情况下，您只需注释掉//clearInterval(makeSameHeight)

jsFiddle Example

＆＃13;

//StackOverflow Solution: http://stackoverflow.com/questions/32360755/how-to-stretch-a-table-to-another-tables-height
// Dynamically Adjust Table height
//09-02-2015

var makeSameHeight = setInterval(function() {
  var firstTable = $('table#one').height() + "px";
  var secondTable = $('table#two').height() + "px";
  if (firstTable === secondTable) {
    var doNothing = "";
    clearInterval(makeSameHeight);
  } else {
    $('table#two').css("height", firstTable);
  }
}, 100);

＆＃13;

table {
  border-collaspe: collapse;
  border: solid 1px black;
  float: left;
  clear: none;
  display: inline-block;
  margin: 5px;
}
td {
  border: solid 1px black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

不确定您的要求。但您可以尝试使用以下代码。你可以把你的循环放在td标签里面。

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#999999" style="border:2px solid #333" valign="top">
        <div ng-repeat="obj in obj">
            <div ng-repeat="obj2 in obj2"> 
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </div>
        </div>
    </td>
    <td bgcolor="#00CC33" style="border:2px solid #333" valign="top">
        <div ng-repeat="obj in obj">
            <div ng-repeat="obj2 in obj2">
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </div>
        </div>
    </td>
  </tr>
</table>

如何将表拉伸到另一个表高度？

3 个答案: