嘿，我来帮你搞定这个表格的列宽问题！你遇到的情况其实很常见——当给表格列设置固定百分比宽度后，原本的横向自适应（grow horizontally）就失效了，这是因为传统表格的列宽计算机制里，固定占比和自动填充剩余空间是互斥的。不过别担心，完全可以实现同时支持百分比列宽和横向自适应的表格，这里有两个靠谱的方案：

方案一：用Flex布局模拟表格（推荐） #

Flex布局比原生表格更灵活，能轻松实现你要的效果。把每一行做成flex容器，第一列设固定百分比宽度，第二列用flex:1让它自动填充剩余空间：

HTML结构 #

<div class="flex-table">
  <div class="table-row">
    <div class="col-1">第一列内容</div>
    <div class="col-2">
      <textarea placeholder="输入内容..."></textarea>
    </div>
  </div>
  <!-- 可以添加更多行 -->
</div>

CSS样式 #

.flex-table {
  width: 100%;
  border-collapse: collapse; /* 模拟表格边框合并效果，可选 */
}
.table-row {
  display: flex;
  border-bottom: 1px solid #eee; /* 模拟表格行边框，可选 */
}
.col-1 {
  width: 25%; /* 你想要的第一列百分比宽度 */
  min-width: 180px; /* 防止窗口过窄时列宽太小，可选 */
  padding: 10px;
}
.col-2 {
  flex: 1; /* 自动填充剩余空间，实现grow horizontally */
  padding: 10px;
}
.col-2 textarea {
  width: 100%;
  height: 80px;
  box-sizing: border-box; /* 让textarea的padding和边框不超出列宽 */
}

方案二：原生表格结合table-layout: fixed #

如果你坚持要用原生<table>标签，可以通过设置table-layout: fixed来强制表格按设定的列宽布局，第二列不设宽度，让它自动占满剩余空间：

代码示例 #

<table style="width: 100%; table-layout: fixed;">
  <tr>
    <td style="width: 25%; min-width: 180px; padding: 10px;">第一列内容</td>
    <td style="padding: 10px;">
      <textarea style="width: 100%; height: 80px; box-sizing: border-box;"></textarea>
    </td>
  </tr>
</table>

关键点说明 #

• table-layout: fixed会让表格优先使用你设定的列宽，而不是根据内容自动调整，这样第二列就能自动填充剩余空间，实现横向自适应。
• 给第一列加min-width可以解决“第一列过窄”的问题，确保在窗口缩小到一定程度时，列宽不会被挤压得无法显示内容。

总结一下：完全可以同时实现百分比列宽和横向自适应的效果，选Flex布局更灵活，原生表格则需要借助table-layout: fixed来调整列宽计算机制。

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