如何让表格单元格内的input拉伸适配单元格，与上方textarea同宽？

需求：将表格中下方的<input>元素拉伸至可用空间，使其宽度与上方的<textarea>保持一致。

原代码如下：

原有CSS #

table, td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  padding: 0.5em;
}

原有HTML #

<table>
<tbody>
  <tr><td><textarea></textarea></td></tr>
  <tr><td><input type="text"/></td></tr>
</tbody>
</table>

解决方案 #

核心是让input和textarea的宽度计算规则统一，同时填满父容器的可用空间：

修改后的CSS：

table, td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  padding: 0.5em;
}

/* 统一文本输入控件的宽度计算方式 */
textarea, input[type="text"] {
  box-sizing: border-box;
  width: 100%;
}

说明：

• box-sizing: border-box：让元素的宽度包含自身的边框和内边距，避免设置width: 100%时，元素因自带的边框/内边距超出父容器。
• width: 100%：让控件填满父级<td>的可用空间，这样input和textarea就会和td的宽度完全匹配，保持一致。

如果需要更灵活的控制，也可以给控件添加类名来单独设置：

可选方案（类名方式）

HTML：

<table>
<tbody>
  <tr><td><textarea class="full-width-input"></textarea></td></tr>
  <tr><td><input type="text" class="full-width-input"/></td></tr>
</tbody>
</table>

CSS：

table, td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  padding: 0.5em;
}

.full-width-input {
  box-sizing: border-box;
  width: 100%;
}

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