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

Question

我的表格上有两张并排的表格。我用相同数据表的两个sql查询填充表。两个查询完全有可能返回不同数量的结果。如果我只是让表格大小独立，它们的垂直中心是对齐的，每个的高度似乎是显示该查询数据所需的最小值。在我的其余形式的背景下，这看起来很奇怪。

我想要的是让较小的桌子成长为与较高桌子相同的高度。较小的表格的内容应该是顶部对齐的，在它下方添加空白区域以使其与较大的表格相同。

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

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

在我填满表格之后，但是我收到错误，因为输入字符串格式不正确＆＃39;。如果我调试，此时我的表的Height属性为空，这可能是导致错误的原因。

有没有办法可以强制我的两张桌子高度相同？我只需要移动我的代码吗？或者那个代码永远不会起作用？或者这是需要在CSS中处理的东西吗？

Answer 1

我不做vb，但你想要实现的结果可以以编程方式完成（我使用了javascript）。

代码背后的想法是在填充表格之后找出（动态地）表格的高度，然后根据高度的比较，给较小的表格赋予较大的高度。还要记住，必须将结果转换为数字进行比较，最后找到并应用更大的值时，添加＆＃34; px＆＃34;价值。

以下是代码段...

＆＃13;

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 2

这是我在你对你的帖子的评论中试图解释的......

    Dim rows1 As Integer = 20 'This would be assigned the rows returned by your sqldatareader
    Dim rows2 As Integer = 10 'Same as before but for second table's query
    Dim rowHeight As Integer = 20
    Dim getHeight As Integer

    If rows1 > rows2 Then
        getHeight = rows1 * rowHeight
    Else
        getHeight = rows2 * rowHeight
    End If

    table1.Height = getHeight
    table2.Height = getHeight