如何设置HTML的textarea使其不影响其他页面元素布局？

你的问题出在表格列宽的默认自适应规则：当前代码里，标签和textarea分别在表格的两行同一列中，表格会让同一列的所有单元格宽度保持一致。当你把textarea设为350px宽时，整个列被撑到350px，第一行的标签单元格（原本设了100px）也被迫变宽，就出现了上方的空白。

给你两个简单的解决办法：

方法1：将标签和textarea放在同一行的不同列（推荐） #

把标签和textarea分到同一行的两个独立单元格里，这样两列宽度互不影响：

<tr>
  <td class="modal-table-label" style="width:100px">
    <label for="description">Desc. Regra</label>
  </td>
  <td>
    <div>
      <textarea name="description" id="description_form" class="info-input-sm" style="width:350px;" rows="5"></textarea>
    </div>
  </td>
</tr>

注意：textarea不需要value属性（内容直接写在标签内部），也可以去掉cols属性（已经用style指定宽度了）。

方法2：固定表格布局，强制列宽 #

如果一定要保持两行的结构，给表格添加table-layout: fixed样式，强制列宽按设置值生效：

<!-- 先给table加样式 -->
<table style="table-layout: fixed; width: 450px;">
  <tr>
    <td class="modal-table-label" style="width:100px">
      <label for="description">Desc. Regra</label>
    </td>
  </tr>
  <tr>
    <td style="width:350px">
      <div>
        <textarea name="description" id="description_form" class="info-input-sm" style="width:100%;" rows="5"></textarea>
      </div>
    </td>
  </tr>
</table>

这里把textarea的宽度设为100%，继承所在td的350px宽度，避免直接设置textarea宽度撑大列。

内容的提问来源于stack exchange，提问作者João Victor Carvalho