在 HTML 表格中单独编辑 TD 的宽度

Posted 2023-03-05

【中文标题】在 HTML 表格中单独编辑 TD 的宽度

【英文标题】：Individually edit the width of TDs in an HTML table

【发布时间】：2013-12-24 11:48:58

【问题描述】：

如何分别更改不同 TD 的宽度？这意味着，如果我更改 TD 的宽度，列的宽度不会受到影响，而只会影响行的宽度。例如：

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

我怎样才能做到这一点？我已经尝试过分别更改每个 TD 的宽度，但是，当我这样做时，它会更改整个列本身的宽度。

这是我的表的代码：

<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" maxlength="500"></textarea>
        </td>
    </tr>
    <tr><td colspan="2"><center><img src="test.php"  /></center></td></tr>
    <tr><td style="text-align:right">Enter the Code:</td><td><input id="security_code" name="security_code" type="text" placeholder="Enter the Code Above"/></td></tr>
</table>

【参考方案1】：

您无法对表格执行您想要执行的操作。表格的整体理念是TD 彼此保持对齐。

如果您想这样做，请放弃使用表格，只需将标签与输入元素一起使用，如下所示：

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

【参考方案2】：

您是否尝试过将其嵌入到 CSS 中？

.type_two width:50px; 

可能不得不摆弄代码以及px 和% 的用法。

<td class="type_two">some type of text</td>