Html 对齐嵌套表的行_Html_Css

Html 对齐嵌套表的行

html css

Html 对齐嵌套表的行,html,css,Html,Css,我有一张桌子，三张嵌套的桌子挨着。第一个表（在第一列中）包括带有参数名称的行，下面3个表（将）包括（3）各种场景（由javascript函数填充）的这些参数值我对html的样式设计不是很有经验，我想知道如何正确设置行的高度，以便主表“Resultable”行中的所有值都能正确对齐？特别是当第二行可以包含多个彼此下方的产品名称时，这三列中的每一列的产品名称数量可能会有所不同（例如，此行的高度可能会有所不同，并由产品名称最多的列决定）（注：我选择了这个特殊的嵌套表结构，因为用户必须能够单击3个表

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

我对html的样式设计不是很有经验，我想知道如何正确设置行的高度，以便主表“Resultable”行中的所有值都能正确对齐？特别是当第二行可以包含多个彼此下方的产品名称时，这三列中的每一列的产品名称数量可能会有所不同（例如，此行的高度可能会有所不同，并由产品名称最多的列决定）

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

有什么建议吗？先谢谢你

html（样式和正文）代码：


.thead_rb td
{
高度：20px；
}
.tbody_rb td
{
高度：20px；
}
算计
产品名称
成本
收入
结果
先前的结果1

像这样做会很痛苦。你真的应该找到一种只有一张桌子的方法。此外，您不应该在多个位置使用相同的ID。如果您的表实际包含内容，这将非常有用（除非问题是您的模板代码，否则只提供生成的HTML）。空标记使您很难确定注释的适当标记应该是什么。thnx。实际上，我一开始就有这样的平面表结构，直到我得出结论，我希望客户能够单击每个区域（我在第2、3和4列中定义为嵌套表），然后javascript将执行一些操作。在平面表结构中，我看不到如何创建onclick函数（类似$（'#nestedtable'）。单击（function（）{//some code}）…同意@cimmanon，如果我们能在该表中获得一些数据来帮助对齐，那将很有帮助。@cimmanon:如前所述，这些标记是空的，因为它们将由javascript函数填充。前两行中的字段包含一些文本，后两行中的字段包含一些数字。

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