如何让表单内的表格宽度与表单其余部分宽度保持一致

开发者阿泽

2026-9-28

表单局部区域宽度溢出修复方案

第一步：给SUPPLEMENTAL INFORMATION区域的外层容器添加宽度约束样式，找到包裹该区域的最外层父元素，添加如下样式，将其中的[上半部分表单实际最大宽度]替换为你页面上半部分表单的真实最大宽度数值即可：
```
.supplemental-wrapper {
  max-width: [上半部分表单实际最大宽度];
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
  overflow: hidden;
}
```
第二步：覆盖内部文本域的宽度规则，之前调整cols参数不生效是因为CSS的width属性优先级远高于HTML的cols原生属性，直接给该区域内所有textarea添加样式即可：
```
.supplemental-wrapper textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  resize: vertical;
}
```

第三步：如果该区域使用了表格布局，补充表格宽度约束，避免单元格内容自动撑宽表格：

.supplemental-wrapper table {
  width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
}
.supplemental-wrapper td, .supplemental-wrapper th {
  box-sizing: border-box;
  word-wrap: break-word;
}