Question

我想在html中对齐内容但不能这样做。此外，我想将复选框对齐到右边并与第二个文本框对齐

这是我的HTML

<table>
    <tbody>
        <tr>
            <td >Age</td>
            <td >
                <select  ></select>
            </td>
        </tr>
        <tr >
            <td >Date changed</td>
            <td>
                <input />
                <input />
            </td>
        </tr>
        <tr>
            <td class="test">Name</td>
            <td>
                <input id="txt1" />
            </td>
        </tr>
        <tr class="Space">
            <td class="test">Is OK</td>
            <td>
                <input id="chk" type="checkbox" />
            </td>
        </tr>
    </tbody>
</table>

以下是fiddle

的链接

Answer 1

将您的HTML更改为以下内容：

<强> HTML

<table style="position: relative; margin-left: 8px;">
<tbody>
    <tr class="Space">
        <td class="test">Age</td>
        <td colspan="2">
            <select  ></select>
        </td>
    </tr>
    <tr class="Space">
        <td class="test">Date changed</td>
        <td colspan="2">
            <input />
            <input />
        </td>
    </tr>
    <tr class="Space">               
                <tr>
                    <td class="test">Name</td>
                    <td>
                        <input id="txtExecuted" />
                    </td>
                    <td class="test" style="text-align: right">Is Ok
                        <input id="chkNotExecuted" type="checkbox" />                        
                    </td>                         
                </tr>

    </tr>
</tbody>

fiddle

Answer 2

试试这个

    <table style="position: relative; margin-left: 8px;">
    <tbody>
        <tr class="Space">
            <td class="test">Age</td>
            <td colspan="2">
                <select  ></select>
            </td>
        </tr>
        <tr class="Space">
            <td class="test">Date changed</td>
            <td>
                <table style='width:100%;'>
                    <tr>
                        <td style="width: 50%">
                            <input />
                        </td>
                        <td style="width: 50%">
                            <input />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="Space">
            <td class="test">Name</td>
            <td>
                <table style='width:100%;'>
                    <tr>
                        <td style="width: 50%">
                            <input id="txtExecuted" />
                        </td>
                        <td style="width: 50%;text-align:right;">
                            <span style='margin-top:2px;'> Is Ok <input id="chkNotExecuted" type="checkbox" /> </span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

在html表中对齐内容

2 个答案: