Question

我正在尝试设计一个看起来像这样的表单：

我尝试了一个嵌入另外两个表的表，一个有5行，另一个有6行，并试图用CSS安排它，但不知何故它似乎没有用。我正在寻找一个解决方案来纠正我的设计或完全另一个（与div？）。这是我的代码：

<td style="display: table-cell; text-align: right; height: 80%;">
    <table style="display: table-cell; text-align: right; height: 80%;">
    <tr>  
    <td width="180" align="right">
        <tech:label key="tolerancesurecarts.input.label.palier1" 
                     labelfor="inputPalier1" />
    </td>
    <td width="180" >
        <tech:text property="inputPalier1" 
                    mode="EEEE" maxlength="8" size="9"/>
    </td>
</tr>

<tr>
    <td width="180" align="right">
        <tech:label key="tolerancesurecarts.input.label.palier2" 
                     labelfor="inputPalier2" />
    </td>
    <td width="180" >
        <tech:text property="inputPalier2" 
                    mode="EEEE" maxlength="8" size="9"/>
    </td>
</tr>

<tr>  
    <td width="180" align="right">
        <tech:label key="tolerancesurecarts.input.label.palier3" 
                     labelfor="inputPalier3" />
    </td>
    <td width="180" >
        <tech:text property="inputPalier3" 
                    mode="EEEE" maxlength="8" size="9"/>
    </td>
</tr>

<tr>
    <td width="180" align="right">
        <tech:label key="tolerancesurecarts.input.label.palier4" 
                     labelfor="inputPalier4" />
    </td>
    <td width="180" >
        <tech:text property="inputPalier4" 
                    mode="EEEE" maxlength="8" size="9"/>
    </td>
</tr>

<tr>
    <td width="180" align="right">
        <tech:label key="tolerancesurecarts.input.label.palier5" 
                     labelfor="inputPalier5" />
    </td>
    <td width="180" >
        <tech:text property="inputPalier5" 
                    mode="EEEE" maxlength="8" size="9"/>
    </td>
</tr>

    </table>
</td>
<td style="text-align: left;">
    <table style="text-align: left;">
        <tr>
            <td><div style="background-color: #CDFFAA; height: 100%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
        </tr>
        <tr>
            <td><div style="background-color: #FFFF99; height: 100%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
        </tr>
        <tr>
            <td><div style="background-color: #FFDC77; height: 100%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
        </tr>
        <tr>
            <td><div style="background-color: #FFBA44; height: 100%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
        </tr>
        <tr>
            <td><div style="background-color: #F07300; height: 100%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
        </tr>
        <tr>
            <td><div style="background-color: #A00000; height: 100%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
        </tr>
    </table>
</td>

我尝试了一些不同的变体，在我的第一个表上使用了各种display css属性，在单元格上使用height css属性，依此类推，但无济于事。有什么想法吗？

Answer 1

我希望这就是你要找的https://jsfiddle.net/sua15zok/3/。请指明是否需要更正in css。我会这样做并更新所需的用户界面。

在网页上重叠表单的布局

1 个答案: