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

标签 html css width html-table

如何分别改变不同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" alt="" /></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>

最佳答案

您不能用表格做您想做的事。表格的整体思想是 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>

关于html - 在 HTML 表格中单独编辑 TD 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20435555/

相关文章:

css - 仅使用 CSS 的工具提示

css - Firefox 是唯一支持 float 作为宽度声明的浏览器吗? (例如 163.4 像素)

html - 多个带有边距以填充父级宽度的 div

javascript - 什么时候应该添加事件监听器?

html - 如何将 Bootstrap Glyphicon 放入 asp :Button in ASP.Net 中?

html - 使用 XSLT 2.0/3.0 使用多个步骤将 CDATA 中的纯文本解析为 html。部分路途

javascript - 使用 Javascript 从选项 HTML 中获取名称

javascript - 卡片阴影效果不起作用(由于悬停不起作用)

javascript - "Zooming"页面上的元素,同时保持放大的中心在窗口的中心

c# - 如何将 .net 图表宽度更改为 %100