现代项目中禁用 display: table 做两栏布局，因其破坏语义、可访问性与响应式能力；应改用 flex 或 grid，并注意 word-break 和等高处理。
别用 HTML 表格做两栏布局——除非你正在维护一个必须兼容 IE8–IE10 的政府或银行老系统。现代项目里写 display: table 做布局，等于主动放弃语义、可访问性和响应式能力。
为什么 display: table 两栏在现代项目中不成立
它解决的兼容性问题早已被构建工具（如 Babel + PostCSS）和 polyfill 覆盖，而它带来的结构性缺陷却无法绕开：
- 屏幕阅读器会把
display: table容器当真实表格读，破坏可访问性 - 表单控件（
<input>、<label></label>）需手动对齐line-height和垂直位置 - 长英文/数字无空格内容会直接撑破容器，
word-break在 table-cell 中行为不稳定 - 移动端无法用媒体查询切单列，
display: table强制横排，只能靠 JS 切类名
colspan 是表格内部跨列，不是布局方案
如果你真在写一个语义正确的 HTML 表格（比如财务报表、课程表），需要某行“左侧内容占两列、右侧内容占一列”，那才轮到 colspan：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<tr> <td colspan="2">aaa</td> <td>bbb</td> </tr>
注意：colspan="2" 不是布局技巧，而是表格语义的一部分。它要求整行 <td> 数量总和必须等于表格定义的列数（例如 2 + 1 = 3）。错一个，表格结构就错位，且无法通过 CSS 修复。
<h3>真正该用的两栏方案：flex 或 grid</h3>
<p>所有新项目，请直接上 <code>display: flex 或 display: grid：
-
display: flex：父容器设display: flex，左栏用flex: 0 0 250px，右栏用flex: 1；兼容 IE10+，代码少、逻辑直 -
display: grid：父容器设display: grid; grid-template-columns: 250px 1fr；更语义化，但 IE 完全不支持 - 右栏含长文本时，务必加
word-break: break-word或overflow-wrap: break-word，否则溢出不可见 - 等高不是默认效果——
align-items: stretch是 flex 默认值，但某些重置 CSS（如 normalize.css 的变体）会干掉它，得手动确认
最常被忽略的一点：所有这些方案里，“左栏高度不随右栏拉伸”不是 bug，是 CSS 正常行为。想视觉等高，别指望自动，得靠父容器约束或显式设 min-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
