html5中通过的span属性实现跨列宽度控制，需配合table显式宽度和css样式，禁用已废弃width属性，并推荐使用table-layout: fixed确保布局稳定。
在HTML5中，<colgroup></colgroup> 本身不直接支持“跨列”样式逻辑，它本质是按列序定义列组——但通过 <col> 的 span 属性，可以精准覆盖多列，实现对复杂表单中逻辑列组（如“姓名+电话”作为一栏、“地址+邮编”作为另一栏）的统一宽度控制。关键在于结构清晰、CSS兜底、避免依赖已废弃属性。
明确列组结构，用 <col> 的 span 定义逻辑列宽
复杂表单常有多组关联字段，比如“用户信息”含两列，“联系信息”含三列。这时不要靠视觉合并单元格，而应在 <colgroup></colgroup> 中用多个 <col>，每个带 span 值对应其逻辑宽度范围：
-
<col span="2" style="width: 30%">表示前两列共占表格总宽30% -
<col span="3" style="width: 50%">表示接下来三列共占50% - 剩余列可由最后一个
<col>（不写span，默认为1）或显式span="1"控制
注意：span 是列数，不是像素或百分比；它只影响该 <col> 样式作用的列数量，不影响内容渲染。
必须设置 table 的显式宽度，否则百分比列宽无效
浏览器默认按内容撑开表格，<col> 中的 width: 40% 只有在父 <table> 有确定宽度时才生效。推荐两种方式：
<ul><li>给 <code><table> 加 <code>style="width: 100%"（响应式首选），并确保其父容器有明确宽度
style="width: 800px"，适合固定布局表单漏掉这步，所有列宽设置都可能被忽略，表现为列宽由内容自动决定。
优先用 CSS 替代 HTML 属性，禁用已废弃的 width 等属性
HTML5 已废弃 <colgroup width></colgroup> 和 <col width>，虽然部分浏览器仍支持，但不可靠。正确做法是：
- 全部使用
style="width: ..."或外部 CSS 类，例如<col class="user-col"> - 配合
table-layout: fixed强制列宽严格按设定执行（尤其适合表单，避免内容过长撑变形） - 为兼容性，可加
td, th { min-width: 0; overflow: hidden; text-overflow: ellipsis; }防止文本溢出破坏布局
处理动态列或响应式场景的补充建议
若表单列数不固定（如后台配置字段），纯 <colgroup></colgroup> 难以应对。此时建议：
- 用 JavaScript 动态生成
<col>元素，并注入style，确保与实际列数匹配 - 小屏幕下改用
@media (max-width: 768px)覆盖列宽，例如将多列表单转为单列堆叠布局 - 避免依赖可视化编辑器生成的内联
width到<td> 上——这类样式易被 CSS 覆盖，且无法批量维护 </td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
