使用JavaScript / CSS

Question

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

以下是当前图片，因为每个表格中的数据都是不同的：

我正在尝试实现以下因为无论哪个表有多少数据，所有数据都应该具有相同的高度：

任何帮助都会很棒。

Answer 1

看看flexboxes：

Throwable exception2 = assertThrows(AdjacentMatrixCreationExeption.class, ()-> {
        Network network = new Network(new String []{"1", "a", "1", "1"});});
    assertEquals("Wrong data format in String[].", exception2.getMessage());

.wrapper {
  display: flex;
}

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

Answer 2

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

(HashMap params, boolean checksumReceived_from_Payu)

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

Answer 3

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

＆＃13;

＆＃13;

.wrap {
  width: 100%;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;