使用 JavaScript/CSS 具有相同高度的表格

Question

我有一个任务，我试图在一个页面中对齐四个表格，然后打印出来。 但由于某种原因，我无法将它们与相同的高度对齐。我有一个限制，只能使用 <table> <tr><td> 结构。

下面是当前图片，因为每张表的数据都是变异的：

我想要实现的是下面的，因为无论哪个表有多少数据，它们都应该是相同的高度：

任何帮助都会很棒。

Answer 1

看看flexboxes：

.wrapper {
  display: flex;
}

table {
  display: flex;
  margin-left: 5px;
  border: 1px solid #000000;
}

<div class="wrapper">

  <table>
    <tr>
      <td>Foo</td>
     </tr>
  </table>
  
  <table>
    <tr>
      <td>Foo</td>
     </tr>
     <tr>
      <td>Foo</td>
     </tr>
     <tr>
      <td>Foo</td>
     </tr>
  </table>
  
  <table>
    <tr>
      <td>Foo</td>
     </tr>
     <tr>
      <td>Foo</td>
     </tr>
  </table>

</div>

Answer 2

获取每个表的总行数。然后从这些数字中获取最大值：

<script type="text/javascript">
function max(tab_num_rows) { // you put the numbers into an array
var ret = tab_num_rows[0];
for (var i=1 ; i<tab_num_rows.length; i++) {
   if (ret < tab_num_rows[i])
       ret = tab_num_rows[i];
}
return ret;
}
</script>

然后您创建一个 JQuery 来循环每个表以添加额外的行，直到达到最大值。

Answer 3

Flexbox 将是解决此问题的典型解决方案（请参阅其他答案），但是，如果您也被限制为不使用 flexbox（例如，由于对旧浏览器的兼容性要求），您可以将所有四个表格放入单元格中一个“包装表”，如

.wrap {
  width: 100%;
}

td {
  background: #eee;
  vertical-align: top;
}

<table class="wrap">
  <tr>
    <td>
      <table>
        <tr>
          <td>One</td>
        </tr>
        <tr>
          <td>One</td>
        </tr>
        <tr>
          <td>One</td>
        </tr>
        <tr>
          <td>One</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>Two</td>
        </tr>
        <tr>
          <td>Two</td>
        </tr>
        <tr>
          <td>Two</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>Three</td>
        </tr>
        <tr>
          <td>Three</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>Four</td>
        </tr>
        <tr>
          <td>Four</td>
        </tr>
        <tr>
          <td>Four</td>
        </tr>
      </table>
    </td>
  </tr>
</table>