直接改HTML结构比套CSS更高效——补全thead/tbody、删除空行/冗余标签、合理使用rowspan/colspan、清除过时属性、用CSS替代table样式、响应式优先采用语义化重排而非overflow截断。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
直接改结构比套CSS快得多——只要把 <table> 内部的语义分组补全、合并逻辑理清、空单元格删掉，80% 的“表格难看”“对不齐”“读不出”问题就消失了。
<h3>补全 <code><thead>/<code><tbody> 是最低成本重构
<p>很多老代码直接用 <code><tr><th> 开头，后面全堆 <code><td>，没分组。这会导致：样式难控制（比如想给所有数据行加 hover 效果）、脚本取数混乱（<code>document.querySelectorAll('tbody tr') 拿不到东西）、屏幕阅读器跳过表头直奔数据。
- 所有表头行必须包在
<thead> 里，哪怕只有一行 <li>所有数据行统一放进 <code><tbody>，不要裸露在 <code><table> 下 <li><code><tfoot> 可选，但如果有合计行，放这里比塞在最后一行 <code><tr> 更语义清晰 <li>检查是否有多余的空 <code><tr> 或孤立 <code><td>，它们会破坏 DOM 结构层级 <h3> <code>rowspan和colspan合并前先画草图盲目写
rowspan="3"容易让后续新增行错位，尤其当表格有动态插入或 JS 渲染时。常见错误是：合并后列数对不上，浏览器自动补空单元格，导致样式塌陷或打印错页。- 先手绘或用 Excel 模拟合并逻辑，标出每个
<th> 或 <code><td> 实际覆盖的行列范围 <li> <code>rowspan值 ≠ 视觉上跨几行，而是“当前单元格 + 往下占几行”，所以rowspan="2"表示它自己占第1行，还“吃掉”第2行对应列的位置 - 同一行中，所有单元格的
colspan值加起来必须等于总列数（否则浏览器会静默修正，但结果不可控） - 避免在
<thead> 里混用 <code>rowspan和colspan超过两层，可访问性工具（如 axe-core）会报“headers 属性缺失”警告删掉所有
border、cellpadding、cellspacing属性这些 HTML 属性不仅过时，还会和 CSS 边框/内边距冲突，造成调试时“明明写了 border: none 却还有线”的困惑。现代重构第一步就是清空它们。
立即学习“前端免费学习笔记（深入）”；
- 把
border="1"全部删掉，用 CSS 的border-collapse: collapse控制边框合并 -
cellpadding改成<td> 和 <code><th> 的 <code>padding -
cellspacing等价于border-spacing，仅在border-collapse: separate时生效；99% 场景用collapse更可控 - 如果表格要打印，额外加一条
@media print { table { border-collapse: collapse; } }，避免打印机渲染出双线 - 优先用 CSS
display: grid或display: table-row-group模拟表格流，配合媒体查询重排结构 - 真要保留表格语义，可用
display: block+width: max-content强制容器撑开，再结合scroll-snap-align提升横向滚动体验 - 移动端关键列（如操作按钮、状态标签）建议用
position: sticky固定，但必须确保父容器有overflow-x: auto且设了width - 别忘了测试
min-width—— 某些小屏设备会把<th> 文字压成一行，导致列宽计算异常 <p>真正卡住重构进度的，往往不是怎么写，而是不敢删：那些没人维护的 <code>class、嵌套在<td> 里的无意义 <code><div>、重复定义的内联 <code>style。先做一次结构清洗，再谈样式和交互。
响应式表格别靠
overflow-x硬截给
<table> 外层加 <code>overflow-x: auto是最懒的响应式方案，但它会让用户失去上下文（看不到哪一列对应哪一列），且无法选中文本、触发 hover 效果。 - 把
- 先手绘或用 Excel 模拟合并逻辑，标出每个
