0

3 つのネストされたテーブルが隣り合っているテーブルがあります。最初の表 (最初の列) には、パラメーター名の行が含まれています。次の 3 つの表には、(3) さまざまなシナリオ (javascript 関数によって入力) のこれらのパラメーターの値が含まれています。

私はhtmlのスタイリングにあまり強くなく、経験も豊富ではなく、行の高さを適切に設定して、メインテーブルの行のすべての値が適切に整列するようにする方法を考えていました。特に、2 行目に多数の製品名が含まれている場合、その数は 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