更改 HTML 表格中 TD 的大小答案

【问题标题】：Change size of TD in an HTML table更改 HTML 表格中 TD 的大小
【发布时间】：2013-12-24 11:23:39
【问题描述】：

我目前有一个如下所示的表格：

http://i.imgur.com/m7vrXyj.png

我想将两个文本框 TD 移到其左侧 TD 旁边（如上图所示）。

我已经尝试过诸如min-width 和white-space: nowrap 之类的方法，但是没有任何效果。我该如何解决这个问题？还是根本不可能？

表格代码为：

<table>
    <tr>
        <td>Name</td>
        <td>
            <input type="text" name="user" placeholder="Your Name" maxlength="20">
        </td>
    </tr>
    <tr>
        <td>Email Address</td>
        <td>
            <input type="text" name="email" placeholder="Your Email Address">
        </td>
    </tr>
    <tr><td>Message</td></tr>
    <tr>
        <td>
            <textarea rows="10" cols="50" name="message" maxlength="500"></textarea>
        </td>
    </tr>
</table>

【问题讨论】：

标签： html css width html-table

【解决方案1】：

您正在寻找 TD 和 TR 的 colspan 属性。它定义了应将多少列组合为一列。

<table>
    <tr>
        <td>Name</td>
        <td>
            <input type="text" name="user" placeholder="Your Name" maxlength="20">
        </td>
    </tr>
    <tr>
        <td>Email Address</td>
        <td>
            <input type="text" name="email" placeholder="Your Email Address">
        </td>
    </tr>
    <tr><td>Message</td></tr>
    <tr>
        <td colspan="2">
            <textarea rows="10" cols="50" name="message"></textarea>
        </td>
    </tr>
</table>

这是上面 jsfiddle 上的示例：http://jsfiddle.net/5Nc6x/

【讨论】：