0

我有一张桌子，旁边有 3 个嵌套的桌子。第一个表（在第一列中）包含带有参数名称的行，以下 3 个表（将）包含（3）各种场景（由 javascript 函数填充）的这些参数的值。

我在样式化 html 方面不是很强大和经验丰富，想知道如何正确设置行的高度，以便主表“结果表”行中的所有值都能正确对齐？特别是当第二行可以包含多个彼此下方的产品名称时，3 列中的每一列的数量可以不同（例如，该行的高度可以变化并且由具有最多产品名称的列确定）。

（ps：我选择了这个特殊的嵌套表结构，因为用户必须能够单击 3 个表中的一个才能执行一些进一步的操作。）

有什么建议么？先感谢您。

html（样式和正文）代码：

<style>
.thead_rb td
{
height:20px;
}

.tbody_rb td
{
height:20px;
}
</style>


<body>
<table class="resulttable">
<tr> <!--3 tables each containing a resultbox next to eachother-->
<td>
    <table class="hideElement" id="rb_valnames">
    <thead class="thead_rb"> <!--empty -->
        <tr>
            <th> calculation </th> <!--empty -->
        </tr>
    </thead>
    <tbody class="tbody_rb"> <!--includes names of calculated values including units-->
        <tr> <td> product names </td> </tr>
        <tr> <td> cost  </td> </tr>
        <tr> <td> revenues </td> </tr>
    </tbody> 
    </table> <!--class="hideElement" id="rb_valnames" -->
</td> <!--table resultbox 0-->
<td>
    <table class="hideElement" id="rb_box0">
    <thead class="thead_rb"> <!--first resultbox includes NO checbox -->
        <tr>
            <th> Result </th> <!--first resultbox includes NO checbox -->
        </tr>
    </thead>
    <tbody class="tbody_rb"> <!--includes results of resultbox 0-->
        <tr> <td id="fld_product_rb0">  </td> </tr>
        <tr> <td id="fld_cost_rb0">  </td> </tr>
        <tr> <td id="fld_revenues_rb0">  </td> </tr>    
    </tbody> 
    </table> <!--class="hideElement" id="rb_box0" -->
</td> <!--table resultbox 0-->
<td>
    <table class="hideElement" id="rb_box1">
    <thead class="thead_rb"> <!--includes checbox to keep results -->
        <tr>
            <th> <label for="keeprbresult[1]"> Previous result 1</label> <input type="checkbox" class="hideElement" id="check_rb1" name="keeprbresult[]" value=""> <br> </th> <!-- checkbox to keep alternative result in checkbox 1--> 
        </tr>
    </thead>
    <tbody class="tbody_rb"> <!--includes results of resultbox 1-->
        <tr> <td id="fld_product_rb0">  </td> </tr>
        <tr> <td id="fld_cost_rb0">  </td> </tr>
        <tr> <td id="fld_revenues_rb0">  </td> </tr>    
    </tbody> 
    </table> <!--class="hideElement" id="rb_box1" -->
</td> <!--table resultbox 1-->
</tr>
</table> <!--resulttable-->
</body>
4

0 回答 0