如何让HTML表格内的textarea跨列铺满整行宽度？

嘿，我来帮你搞定这个textarea只占单列宽度的问题！其实核心原因是默认情况下textarea被限制在所在表格单元格的宽度里，咱们可以通过两种简单的方法让它铺满整行：

方法一：利用表格colspan属性（最稳妥） #

把放置textarea的单元格设置为跨所有表格列，再让textarea宽度设为100%，就能完美适配整行宽度了。

示例代码：

<table border="1">
  <!-- 表格的内容行 -->
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
  </tr>
  <!-- 放置textarea的行 -->
  <tr>
    <!-- colspan数值要和表格总列数一致，这里是3列就写3 -->
    <td colspan="3">
      <!-- 加box-sizing: border-box是为了让内边距、边框不超出宽度 -->
      <textarea style="width: 100%; box-sizing: border-box;">我现在能填满表格整行啦！</textarea>
    </td>
  </tr>
</table>

方法二：用CSS类统一控制（更优雅） #

如果不想写内联样式，可以把样式抽成CSS类，方便复用：

CSS代码：

.full-table-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px; /* 可选：设置最小高度，避免textarea太矮 */
  resize: vertical; /* 可选：只允许垂直拉伸，防止横向拉伸破坏布局 */
}

HTML代码：

<table border="1">
  <tr>
    <td>列A</td>
    <td>列B</td>
  </tr>
  <tr>
    <td colspan="2">
      <textarea class="full-table-textarea"></textarea>
    </td>
  </tr>
</table>

注意事项 #

• 一定要保证colspan的数值和表格的总列数完全一致，不然会出现表格布局错乱的情况
• box-sizing: border-box是关键，它能让textarea的内边距、边框都包含在设置的宽度里，不会超出单元格范围
• 如果不需要用户拉伸textarea，可以加上resize: none禁用拉伸功能

内容的提问来源于stack exchange，提问作者SMH