row-span-和col-span-是Tailwind专为CSS Grid设计的工具类，仅对display: grid容器的直接子元素生效，不适用于<table><tr><td>等传统表格元素；HTML表格应使用原生rowspan/colspan属性。
row-span 和 col-span 的作用对象不是 <table> 或 <tr>
很多人一上来就给 <table> 加 row-span-2，结果完全没效果——因为 row-span- 和 col-span- 是 Tailwind 为 grid 布局设计的工具类，**不适用于传统 HTML 表格元素**（<table>、<tr>、<td>）。它们只对启用了 display: grid 的容器及其直接子元素生效。
如果你坚持用语义化 <table>，那应该用原生 HTML 属性：rowspan 和 colspan（注意：全小写，无连字符，且是 HTML 属性，不是 Tailwind 类）。
常见错误现象：
- 给
<td rowspan="2">同时加row-span-2→ 类被忽略，仅rowspan生效 - 在
<tr>上写col-span-3→ 完全无效，<tr>不是 grid item
用 Grid 模拟表格时，row-span- 才真正起作用
当你用 grid 替代 <table>（例如用 <div class="grid grid-cols-4">），子元素才能响应 row-span- 和 col-span-。
立即学习“前端免费学习笔记（深入）”；
使用场景：需要复杂合并（比如仪表盘中一个指标单元格横跨两列+纵跨三行）、或想绕过 <table> 的语义/可访问性限制（但注意：这会牺牲屏幕阅读器对数据表的天然支持）。
实操建议：
- 父容器必须设
grid+ 明确列数，如grid-cols-5；否则col-span-3无法计算占位 -
row-span-要求容器有明确行轨道，通常需配合grid-rows-*或内容撑开（依赖自动行生成时，跨行可能“看不见”） - 避免在同一个 grid item 上同时用
row-span-和col-span-太大数值，容易挤占其他项空间，建议先用border可视化网格
示例（四列表格，首项跨两行两列）：
<div class="grid grid-cols-4 gap-1 border"> <div class="row-span-2 col-span-2 bg-blue-100 p-2">标题区</div> <div class="p-2">A1</div> <div class="p-2">A2</div> <div class="p-2">B1</div> <div class="p-2">B2</div> <div class="p-2">C1</div> <div class="p-2">C2</div> </div>
HTML 表格里正确用 rowspan / colspan 的细节
虽然不是 Tailwind 类，但在 <table> 中必须靠这两个原生属性实现跨行跨列。Tailwind 只能辅助样式（比如统一 padding、text-align），不能替代它们。
关键点：
-
rowspan和colspan是数字属性，写整数即可，不要带单位或引号（但加引号也不报错） -
rowspan="2"表示该单元格占据当前行 + 下一行的同一列位置，**后续行中对应列的<td>必须跳过**，否则会重叠或错位 - 若某行总列数不足定义的
grid-cols-n，浏览器会自动补空单元格；但用rowspan时，务必手动删掉被占用列的<td>，否则表格结构会混乱
错误写法（第二行多写了一个 <td>）：
<tr><td rowspan="2">头</td><td>A</td></tr> <tr><td>B</td><td>C</td></tr> <!-- 这里本该只有 1 个 <td>，因为第1列已被 rowspan 占用 -->
响应式跨列要小心断点冲突
Tailwind 的响应式前缀（如 md:col-span-2）对 grid 有效，但对原生 rowspan/colspan 无效——HTML 属性不支持媒体查询。
这意味着：如果你用 grid 模拟表格并希望「移动端单列、桌面端四列且首项跨两列」，可以这样写：
<div class="grid grid-cols-1 md:grid-cols-4"> <div class="col-span-1 md:col-span-2">主内容</div> <div>侧栏1</div> <div>侧栏2</div> </div>
但如果你用真实 <table>，colspan 值无法随屏幕变化，只能靠 JS 动态改属性，或准备两套 DOM 结构。
性能提示：频繁切换 colspan 值会触发重排，比纯 CSS 的 grid 响应式开销更大。
真正麻烦的地方往往不在写法，而在于合并后如何保持垂直居中、边框对齐、以及和表头（<th>）的语义一致性——这些都得靠额外类或 wrapper 元素兜底，不是加个 row-span-3 就万事大吉。
