两个不同列的表 - 可能是相同的高度？ HTML CSS

Question

我有两张桌子。它们是浮动的：左边是彼此相邻的。我想让表2与表1的高度相同。如图所示，黄色背景下降到表1的底部。 目前：

应该是这样的：

我不想硬编码像素，因为它需要在不同的显示器和移动设备上显示相同的像素。

编辑：我会给最后一行加一个更长的高度。谢谢你的回答。

Answer 1

您可以使用此调用找出表中有多少行（JavaScript，将其包含在标记中）：

var x = document.getElementById("myTable").rows.length;

其中“myTable”是左表的id。

然后通过获取当前行数将第二个表中的行数设置为x：

var y = document.getElementById("mySecondTable").rows.length;

其中“mySecondTable”是右表的id。

var numRowsToCreate = x - y;

for(i = 0; i < numRowsToCreate; i++) {
  var secondTable = document.getElementById("mySecondTable");
  var newRow = document.createElement('tr');
  //Set any attributes of the table row here, like background-color.

 secondTable.appendChild(newRow);
}

Answer 2

将班级.row-eq-height添加到父级div：

CSS：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

DEMO