表格单元格合并需严格对齐结构，rowspan要求下一行对应列留空，colspan仅影响当前行；必须设置table-layout:fixed并用定义列宽；多表格布局应改用css grid而非嵌套table。
用 colspan 和 rowspan 合并单元格时，结构必须对齐
合并不是“视觉挪动”，而是改变单元格的渲染占位。一旦某个 <td rowspan="2"> 出现，下一行对应列位置**必须留空**，否则浏览器会自动补 <code><td>，导致整行错位。
<p>常见错误现象：表格某行突然多出一列、文字堆叠、边框断裂。</p>
<ul>
<li>写法上，先处理 <code>rowspan，再处理 colspan；跨行合并优先级更高
<tbody>，确认每行 <code><td> 数量是否恒定
<li>不要在已设 <code>rowspan 的列中重复写 <td>，哪怕内容为空也要跳过
<li>
<code>colspan 相对安全，但它只影响当前行，不会“撑开”后续行的列宽固定列宽必须配 table-layout: fixed
不加这个声明，width 属性在 <col> 或 <td> 上基本无效——浏览器默认按内容自动撑开列宽，尤其在中文或长英文单词场景下完全失控。
<p>实操建议：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>优先用 <code><col> 定义列宽：<col style="width: 150px">，比在第一行 <td> 上设 <code>width 更稳定
table-layout: fixed 后，所有列宽只认第一行（或 <col>），后续行的 width 声明会被忽略overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 缺一不可<col> 支持弱，兜底方案是给第一行每个 <th> 加内联 <code>width 属性，如 <th width="120">
<h3>8 个以上独立表格排布，别用嵌套 <code><table> 或 <code>float
传统做法（比如把 8 个表格塞进一个大 <table>）会导致语义混乱、响应式失效、JS 操作困难。现代浏览器里，<code>display: grid 是唯一合理选择。
关键点：
- 每个表格包一层
<div class="table-wrapper">，避免直接操作 <code><table> 节点 <li>容器设 <code>display: grid; grid-template-areas:，用grid-area精确分配位置，比如grid-area: t1; - 行列轨道推荐用
fr+ 固定值组合，例如grid-template-rows: 200px 1fr 150px; - 避免在
<table> 上直接设 <code>width: 100%，应让 wrapper 控制尺寸，表格自身设width: 100%; height: 100%需要动态调整或响应式，就该放弃原生
<table><p>当出现这些情况时，<code><table> 不再是“够用”，而是“碍事”： <ul><li>小屏下横向滚动卡顿（<code><table> 的 <code>overflow-x: auto在 iOS Safari 表现极差） - 要实现“课程横跨周三+周五”这类非连续列合并，
colspan会破坏整行结构 - 需配合 JS 实时拖拽排序、折叠/展开某行、高亮筛选结果
- 服务端返回的是扁平 JSON，而非二维矩阵，硬转
<tr><td> 成本高且难维护 <p>这时直接用 <code>div+display: grid或display: flex模拟表格行为更轻量。重点不是“像不像表格”，而是“能不能可靠承载数据与交互逻辑”。
