html - 对齐html表格中的内容

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