HTML textarea 高度影响相应行的 td 高度

Question

我最近开始从事 Web 开发工作，目前我正在 php 脚本中处理 html 表单。我有一个带有 rowspan 的 textarea 的 td。但是当我增加 textarea 的 "rows" 时，同一行中的 td 开始扩展（这里是名称字段 td）。下面的图片会解释它

我的代码是：

<table style=" width: 500px;">
<tr>
 <td style="text-align: right; padding: 5px; width: 60px; margin:5px;">*Name</td>
 <td><input name="name" type="text" id="name" size="30" value="<?php echo $name; ?>" /></td>
 <td rowspan="3" style="vertical-align: top; text-align: right; padding: 5px;margin: 5px;">*Message</td>
 <td rowspan="3"><textarea name="comments" cols="100" rows="5" id="comments" class="mtextarea" style="resize: none;"><?php echo $comments; ?></textarea></td>
 
</tr>
<tr>
 <td style="text-align: right; padding: 5px; margin: 5px;">*Email</td>
 <td><input name="email" type="text" id="email" size="30" value="<?php echo $email; ?>" /></td>
</tr>
<tr>
 <td style="text-align: right; padding: 5px;margin: 5px;">*Subject</td>
 <td><input name="subject" type="text" id="subject" size="30" value="<?php echo $subject; ?>" /></td>
</tr>
<tr>
 <td colspan="4"><div style="text-align:center"><input name="contactus" type="submit" class="submit" id="contactus" value="Submit"
 style="background-color: #DF1D2A; 
 width:100px; 
 color: white; 
 padding:7px 15px; 
 border:0 none; 
 -webkit-border-radius: 5px;
 border-radius: 5px; 
 font-size: 15px;"/></div></td>
</tr>
</table>

我已经尝试在网上寻找它，但仍然没有找到。我不知道到底要找什么。任何指针都会有所帮助。

谢谢

Answer 1

我没有发现代码有任何问题，尽管如果您只想更新文本区域，您始终可以使用分配给它的 class '.mtextarea' 并添加宽度.

Answer 2

这没什么问题（只要那些 PHP 变量被清理并且没有标记）。

您可能在项目中添加了其他一些 CSS 导致此问题的冲突样式。我建议使用 "inspect element" 并查看应用于 "Name" td 和 "Message" td 的样式，以及其中的输入。我会选择性地禁用任何无关的与布局相关的样式，看看您是否可以解决问题。

HTML textarea 高度影响相应行的 td 高度

HTML textarea height impacting respective row's td height

html

css

forms

textarea