HTML表格不支持“十字交叉排版”，所谓“十字”实为同时使用rowspan和colspan的单元格合并；其渲染易错位，因浏览器逐行按列计数，需手动计算每行剩余逻辑列数；真正“十字”视觉布局应使用CSS Grid而非table。
HTML 表格本身不支持“十字交叉排版”这种说法——它没有“十字”概念，只有行列结构；所谓“十字交叉”，通常是开发者想表达「某单元格既跨行又跨列」，即同时使用 rowspan 和 colspan 的复合合并。
为什么直接写 rowspan + colspan 容易错位
表格渲染是逐行、按列累计计数的。一旦某单元格用了 rowspan="2" 和 colspan="2"，它就占了「第1行第1列」起的 2×2 区域；后续同一行的其他 <td> 必须从第3列开始，否则浏览器会自动补空或错行。
<ul><li>常见错误：在 <code><tr> 中先放一个 <code><td rowspan="2" colspan="2">A</td>，接着又写 <td>B</td>
<td>C</td> —— 这行实际已超列（2+1+1=4），但若整表声明为 3 列，B/C 就会被挤到下一行或被忽略
colspan="2"，那该行最多还能放一个 colspan="1" 单元格rowspan 影响的是后续行的可用列数：被跨行的那些行，对应列位置不能再放新单元格，否则结构断裂实现真正可控的“十字中心”效果（如标题居中+四角内容）
如果你要的是视觉上类似「+」字形：顶部一个大标题横跨全宽，左侧一栏导航、右侧一栏内容、下方一个通栏说明——这不是靠单个表格能干净实现的，而是语义与布局的错配。此时 <table> 不是解法，display: grid 才是。
- 用
<table>强行套：需至少 3 行 × 3 列，中间单元格设rowspan="1" colspan="1"，四周分别填内容，但表头/表体语义混乱，响应式时极易崩 - 推荐方案：外层用
<div class="cross-layout">，CSS 设display: grid; grid-template-areas: "head head head" "nav main aside" "foot foot foot";，再用grid-area分配各区域 - 如果非得用表格（例如旧系统受限），至少包裹
<thead><tbody><tfoot>，并给所有<th>加scope="col"或scope="row"，否则读屏器完全无法理解“十字”关系
移动端下 rowspan+colspan 渲染异常的现实问题
安卓部分 WebView（尤其 Android 9–10 系统自带）对嵌套 rowspan+colspan 的解析不稳定：跨行单元格可能被截断、高度塌陷，或导致后续行错位。这不是代码写错，而是引擎缺陷。
立即学习“前端免费学习笔记（深入）”；
- 规避方式：避免
rowspan > 2且colspan > 2同时出现；优先拆成多个简单表格或改用 CSS Grid - 必须保留表格时，加一层
<div style="overflow-x: auto">包裹，并设table { table-layout: fixed; width: 100%; } - 测试关键点：用真机打开，横向滚动看是否出现空白列、文字重叠、或
<td>内容被裁剪——这些都不是样式问题，是渲染层丢帧
真正的难点不在怎么写 colspan 和 rowspan，而在于判断这个“十字”是不是数据本身的结构特征。如果是课程表里「第3节 × 星期三 = 物理实验」，那它天然就是二维交叉，<table> 正确；如果只是为了页面视觉分块，那就已经越界了——表格不该为布局妥协语义，哪怕它看起来像一个十字。
