css - 使两个动态填充的表具有相同的高度

Question

我的表单上有两个并排的表格。我正在用同一个数据表的两个 sql 查询填充表。这两个查询完全有可能返回不同数量的结果。如果我只是让表自行调整大小，它们的垂直中心是对齐的，并且每个表的高度似乎是显示该查询数据所需的最小值。这在我表单的其余部分的上下文中看起来很奇怪。

我想要的是让较小的 table 长到与较高的 table 相同的高度。较小表格的内容应顶部对齐，仅在其下方添加空格以使其与较大表格的大小相同。

我对 CSS 不是很熟悉，所以我尝试在我的 vb 代码中使用

Dim Height as String = Math.Max(Convert.ToInt16(table1.Height),Convert.ToInt16(table2.Height))
table1.Height = Height
table2.Height = Height

填满表格后，我收到“输入字符串格式不正确”的错误消息。如果我调试，此时我的表的 Height 属性为空，这可能是导致错误的原因。

有什么方法可以强制我的两个 table 高度相同？我只需要移动我的代码吗？还是该代码永远不会起作用？或者这是需要在 CSS 中处理的事情吗？

Answer 1

我不使用 vb，但您尝试实现的结果可以通过编程方式完成(我使用了 javascript)。

代码背后的想法是找出(当然是动态地)填充表格后的高度，然后根据高度比较，将较大的高度赋予较小的表格。另请记住，结果必须转换为数字以进行比较，当最终找到并应用更大的值时，将“px”添加到该值。

这是一个代码片段...

document.getElementById("tbl1h").innerHTML = "tbl1 height: " + document.getElementById("tbl1").offsetHeight;
document.getElementById("tbl2h").innerHTML = "tbl2 height: " + document.getElementById("tbl2").offsetHeight;

if (Number(document.getElementById("tbl1").offsetHeight) >= Number(document.getElementById("tbl2").offsetHeight)) {
    document.getElementById("tbl2").style.height = Number(document.getElementById("tbl1").offsetHeight)+"px";
} else {
    document.getElementById("tbl1").style.height = Number(document.getElementById("tbl2").offsetHeight)+"px";
}
document.getElementById("res").innerHTML = " After change:: tbl1 height: " + document.getElementById("tbl1").offsetHeight + "  tbl2 height: " + document.getElementById("tbl2").offsetHeight;

table,th,td {
  border: 1px solid black;
  text-align: center;
  align: center;
}
th {
  text-decoration: underline;
}
#tbl1 {
  width: 30%;
  box-sizing: border-box;
  float: left;
  background: yellow;
}
#tbl2 {
  width: 70%;
  box-sizing: border-box;
  float: left;
  background: green;
}

<table id="tbl1" class="tbl">
    <tr>
        <th>blah</th>
        <th>77666</th>
    </tr>
    <tr>
        <td>asasaas</td>
        <td>grfrrrgrrt</td>
    </tr>
    <tr>
        <td>asasaas</td>
        <td>grfrrrgrrt</td>
    </tr>
    <tr>
        <td>asasaas</td>
        <td>grfrrrgrrt</td>
    </tr>
    <tr>
        <td>asasaas</td>
        <td>grfrrrgrrt</td>
    </tr>
    <tr>
        <td>asasaas</td>
        <td>grfrrrgrrt</td>
    </tr>
</table>
<table id="tbl2" class="tbl">
    <tr>
        <th>wooohooooo</th>
        <th>ahaaa</th>
        <th>rtrt</th>
        <th>aas</th>
    </tr>
    <tr>
        <td>nnnsnnsnsnn</td>
        <td>aasqs</td>
        <td>ndcd</td>
        <td>776676676</td>
    </tr>
    <tr>
        <td>nnnsnnsnsnn</td>
        <td>aasqs</td>
        <td>ndcd</td>
        <td>776676676</td>
    </tr>
    <tr>
        <td>nnnsnnsnsnn</td>
        <td>aasqs</td>
        <td>ndcd</td>
        <td>776676676</td>
    </tr>
    <tr>
        <td>nnnsnnsnsnn</td>
        <td>aasqs</td>
        <td>ndcd</td>
        <td>776676676</td>
    </tr>
    <tr>
        <td>nnnsnnsnsnn</td>
        <td>aasqs</td>
        <td>ndcd</td>
        <td>776676676</td>
    </tr>
    <tr>
        <td>nnnsnnsnsnn</td>
        <td>aasqs</td>
        <td>ndcd</td>
        <td>776676676</td>
    </tr>
    <tr>
        <td>nnnsnnsnsnn</td>
        <td>aasqs</td>
        <td>ndcd</td>
        <td>776676676</td>
    </tr>
    <tr>
        <td>nnnsnnsnsnn</td>
        <td>aasqs</td>
        <td>ndcd</td>
        <td>776676676</td>
    </tr>
</table>
Before change:::
<div id="tbl1h"></div>
<div id="tbl2h"></div>
<div id="res"></div>

希望这就是您要找的。祝你好运

更新::这里还有一个 fiddle 链接http://jsfiddle.net/fe2crmsx/