HTML表格非为双栏页面布局设计，强行使用会导致语义错误、可访问性崩坏、响应式失效；控制表格内部列宽（如表单对齐）才需深挖宽度逻辑，可靠方式是table-layout: fixed配合严格按比例分配列宽。
HTML表格本身不是为双栏页面布局设计的，强行用 <table> 做整体页面分栏，会立刻掉进语义错误、可访问性崩坏、响应式失效这三重坑里。真要控制表格内部列宽——比如表单里左右标签+输入框对齐、参数配置表两列等宽——才值得深挖宽度分配逻辑。
<h3>为什么直接写 <code>width="50%" 在 <td> 上不管用
<p>浏览器默认用 <code>table-layout: auto，它会逐行扫描内容长度来撑开列宽。width 属性在这一模式下只是“建议最大值”，不是指令。尤其当某列塞了长 URL 或无空格文本时，其他列会被压缩甚至挤到下一行。
- 只设
<td width="50%">，没配 <code>table-layout: fixed→ 百分比被忽略 - 写了
table-layout: fixed但没给<table> 设明确宽度（如 <code>width: 100%）→ 百分比失去计算基准，结果不可控 -
<col>没放在<table> 开始后、<code><thead> 前 → 整组失效 <h3>可靠设置列宽比例的唯一组合：<code>table-layout: fixed+<colgroup></colgroup>这是唯一能绕过内容干扰、让列宽严格按比例执行的方式。所有列都必须显式声明，漏一列，那一列就回退到自动计算，破坏整体比例。
<table style="width: 100%; table-layout: fixed;"> 是前提，缺一不可 <li> <code><colgroup></colgroup>必须紧贴<table> 标签后、<code><thead> 前，顺序错即失效 <li>每列对应一个 <code><col style="width: 30%">，百分比基于整个<table> 宽度计算 <li>不要混用单位：同一张表里避免 <code>width: 120px和width: 40%并存，fixed 布局下剩余空间分配会异常
示例（左右各占 50%）：
立即学习“前端免费学习笔记（深入）”；
<table style="width: 100%; table-layout: fixed;"> <colgroup> <col style="width: 50%"> <col style="width: 50%"> </colgroup> <tr><td>Label</td><td><input></td></tr> </table>双栏表单中左右不对齐的典型修复点
常见于 label + input 组合，表面写了等宽，实际竖线错位。根本原因常是
colspan打乱了列宽继承，或未统一处理换行与截断。- 某行用了
colspan="2"→ 立刻切回table-layout: fixed，否则该行会重算列宽，导致竖线偏移 - 左栏文字长、右栏输入框短 → 两侧
<td> 高度不一致，视觉错位；加 <code>vertical-align: top统一对齐基线 - 输入框内容超长溢出 → 给
<td> 加 <code>overflow: hidden; text-overflow: ellipsis; white-space: nowrap强制截断 - 想让左标签固定 120px、右输入框占满剩余 →
<col style="width: 120px"> <col style="width: auto">，但注意auto列在 fixed 布局下仅当其他列已定宽时才生效
真正需要做页面级双栏布局时，
display: grid或display: flex是更干净、可维护、无障碍友好的选择；表格列宽控制，只应聚焦在表格数据本身的呈现精度上——这点容易被忽略，但恰恰是区分“能跑”和“能长期维护”的关键边界。
