Question

我使用以下代码在HTML中创建表格，但是年份和月份控件逐个显示（向上和向下）：

    <table>
        <tr>
            <th>Name
            </th>
            <th>Sex
            </th>

            <th>Age
            </th>
            <th>Experience
            </th>
        </tr>
        <tr>
            <td>
                <input id='Name' type='text' style='width: 120px;' />
            </td>
            <td>
                <input id='Sex' type='text' style='width: 120px;' />
            </td>
            <td>
                <input id='Age' type='text' style='width: 120px;' />
            </td>
            <td>
                <input id='years' type='text' style='width: 120px;' />Year(s)
                <input id='months' type='text' style='width: 120px;' />Month(s)
            </td>
        </tr>
</table>

我需要输出如：

但它看起来像是：

我该如何解决这个问题？

Answer 1

添加CSS white-space: nowrap;以防止内联节点进入新行。

<td style="white-space: nowrap;">
  <input id='years' type='text' style='width: 120px;' />Year(s)
  <input id='months' type='text' style='width: 120px;' />Month(s)
</td>

Answer 2

您需要添加标签

 <tr>
        <th>Name
        </th>
        <th>Sex
        </th>

        <th>Age
        </th>

        <th>Experience
        </th>
    </tr>

    <tr>
        <td>
            <input id='Name' type='text' style='width: 120px;' />
        </td>
        <td>
            <input id='Sex' type='text' style='width: 120px;' />
        </td>
        <td>
            <input id='Age' type='text' style='width: 120px;' />
        </td>
        <td>
            <label for="">Year(s)</label>
            <input id='years' type='text' style='width: 120px;' />
            <label for="">Month(s)</label>
            <input id='months' type='text' style='width: 120px;' />
        </td>

    </tr>

Answer 3

我已经在不同的浏览器上检查了你的代码。它与您所需的输出相匹配。

如果仍然面临问题那么我相信你可以增加宽度尺寸。

<td  width="">
        <input id='years' type='text' style='width: 120px;' />Year(s)
        <input id='months' type='text' style='width: 120px;' />Month(s)
 </td>

否则

请检查您使用过Table或tr或td标签的CSS。

Answer 4

<table>
    <tr>
        <td>
            <label>Name</label><br>
            <input id='Name' type='text' style='width: 120px;' />
        </td>
        <td>
            <label>Sex</label><br>
            <input id='Sex' type='text' style='width: 120px;' />
        </td>
        <td>
             <label>Age</label><br>
            <input id='Age' type='text' style='width: 120px;' />
        </td>
        <td>
             <label>Years</label><br>
            <input id='years' type='text' style='width: 120px;' />Year(s)<br>
            <label>Months</label><br>
            <input id='months' type='text' style='width: 120px;' />Month(s)
        </td>
    </tr>

如何对齐HTML表格？

4 个答案: