是。老表格布局直接套Flex/Grid会因渲染引擎协议层不同导致页面错乱：table-layout算法与Flex/Grid互斥，引发colspan/rowspan错位、border-collapse失效、单元格高度塌陷；必须用包裹容器锁定行为边界，禁用对table元素设display: block/flex。

老表格布局直接套Flex/Grid为什么页面全炸

不是CSS写错了，是

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

的渲染行为和现代布局引擎根本不在一个协议层。浏览器对有独立的table-layout算法，而display: flex会强制绕过它，导致colspan/rowspan错位、border-collapse失效、单元格高度塌陷。

最稳的过渡方式是加一层包裹容器，再用CSS锁定老表格的“行为边界”：

• 给每个老

外层加

，不要动原有HTML结构

CSS里写.legacy-table-wrapper table { table-layout: fixed; width: 100%; border-collapse: collapse; }，锁死尺寸与边框逻辑

禁止对

本身设display: block或flex——这会触发渲染引擎降级到“兼容模式”，反而更不可控

document.execCommand失效后，表格内富文本编辑怎么救

document.execCommand在Chrome 93+、Firefox 89+、Safari 15.4+已彻底移除，返回false且不报错。表格里常见的“加粗选中单元格文字”“居中对齐整行”这类操作，不能再靠它驱动。

必须改用原生事件链手动操作DOM：

立即学习“前端免费学习笔记（深入）”；

• 监听beforeinput事件捕获格式意图（如formatBold），再用getSelection() + Range定位选区
• 对选中文本节点，手动插入<strong></strong>或设置style.textAlign = 'center'
• 若需支持queryCommandState类判断（比如按钮高亮），别查浏览器API，改查DOM：node.parentElement?.tagName === 'STRONG' 或 getComputedStyle(node).textAlign === 'center'

Vue/React迁移时，表格数据绑定容易漏掉的三件事

把静态

改成框架驱动的v-for或{data.map()}不难，但以下三点常被跳过，上线后立刻暴露：

• 表头<th>必须带<code>scope属性（如scope="col"），否则屏幕阅读器无法建立行列关联，WCAG 2.1直接不通过
• 动态渲染的<tbody>必须严格配对<code><thead>，不能只渲染<code><tr>——框架diff会误判为节点替换，导致滚动位置丢失、焦点重置 <li>表格内嵌组件（如状态徽标、操作按钮）需显式声明<code>key，且key不能只用数组索引（:key="index"），要用唯一业务ID，否则排序/过滤后交互状态错乱

重构中“可访问性退化”比性能问题更隐蔽

老表格哪怕结构混乱，只要用了<th>和<code>colspan，屏幕阅读器至少能按行列读取。但迁移到框架后，开发者常把整个表格当黑盒渲染，忘了补语义：

• 用<div role="table">替代<code><table>时，必须同步加<code>role="rowgroup"、role="row"、role="cell"或role="columnheader"
• 动态加载数据时，aria-busy="true"要作用于<table>本身，而不是父容器——否则NVDA/JAWS不会暂停读表 <li>表格排序按钮必须带<code>aria-sort，且值要随状态实时更新（"ascending"/"descending"/"none"），不能只靠视觉图标

这些细节不报错、不卡顿、不影响功能，但会让残障用户完全无法使用表格——而且测试覆盖率工具通常扫不出来。