ASP.NET MVC项目中textarea的colspan="2"属性失效求助

嘿，我一眼就发现问题出在哪了——你把colspan属性用错对象啦！

问题根源 #

colspan是表格单元格<td>或<th>的专属属性，用来控制单元格跨列的数量。而<textarea>作为表单输入控件，根本不识别这个属性，所以你直接给它加colspan="2"，浏览器自然会忽略这个无效属性。

正确的实现方式 #

你需要把<textarea>放在一个设置了colspan="2"的<td>里面，让这个单元格跨两列，再让textarea填满整个单元格空间。结合你的现有代码，修正后的视图代码应该是这样的：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wizard">
 <div >
  <div>
   <table>
    <tr>
     <!-- 普通单元格 -->
     <td>
      <div>
       <!-- 这里放你的其他内容 -->
      </div>
     </td>
     <!-- 跨两列的单元格，用来放textarea -->
     <td colspan="2">
      <textarea class="form-control" rows="4">这里是你的文本内容</textarea>
     </td>
    </tr>
    <!-- 其他表格行 -->
   </table>
  </div>
 </div>
</div>

额外优化提示 #

• 如果你用了Bootstrap，给textarea加上form-control类，它会自动适应父容器宽度，还自带统一的样式。
• 如果不需要Bootstrap的样式，也可以给textarea加自定义CSS让它占满单元格：

  textarea {
    width: 100%;
    box-sizing: border-box; /* 避免padding导致宽度超出单元格 */
  }
  

另外，你的现有CSS中对<td>设置的position和left属性，只会影响单元格的位置偏移，不会干扰colspan的生效，所以不用调整这部分代码。

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