Question

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

我在样式化html方面不是很强大且经验丰富，并且想知道如何正确设置行的高度，以便主表'resulttable'中的所有值都能正确对齐？特别是当第二行可以包含多个彼此之下的产品名时，对于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>

对齐嵌套表的行

0 个答案: