row-span-和col-span-是tailwind专为css grid设计的工具类，仅对display: grid容器的直接子元素生效，不适用于等传统表格元素；html表格应使用原生rowspan/colspan属性。
row-span 和 col-span 的作用对象不是 <table> 或 <code><tr><p>很多人一上来就给 <code><table> 加 <code>row-span-2，结果完全没效果——因为 row-span- 和 col-span- 是 Tailwind 为 grid 布局设计的工具类，**不适用于传统 HTML 表格元素**（<table>、<code><tr>、<code><td>）。它们只对启用了 <code>display: grid 的容器及其直接子元素生效。
如果你坚持用语义化 <table>，那应该用原生 HTML 属性：<code>rowspan 和 colspan（注意：全小写，无连字符，且是 HTML 属性，不是 Tailwind 类）。
常见错误现象：
- 给
<td rowspan="2"> 同时加 <code>row-span-2→ 类被忽略，仅rowspan生效 - 在
<tr> 上写 <code>col-span-3→ 完全无效，<tr> 不是 grid item<h3>用 Grid 模拟表格时，<code>row-span-才真正起作用当你用
grid替代<table>（例如用 <code><div class="grid grid-cols-4">），子元素才能响应 <code>row-span-和col-span-。使用场景：需要复杂合并（比如仪表盘中一个指标单元格横跨两列+纵跨三行）、或想绕过
<table> 的语义/可访问性限制（但注意：这会牺牲屏幕阅读器对数据表的天然支持）。<p>实操建议：</p> <ul> <li>父容器必须设 <code>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），不能替代它们。<p>关键点：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>
<code>rowspan 和 colspan 是数字属性，写整数即可，不要带单位或引号（但加引号也不报错）
rowspan="2" 表示该单元格占据当前行 + 下一行的同一列位置，**后续行中对应列的 <td> 必须跳过**，否则会重叠或错位<li>若某行总列数不足定义的 <code>grid-cols-n，浏览器会自动补空单元格；但用 rowspan 时，务必手动删掉被占用列的 <td>，否则表格结构会混乱<p>错误写法（第二行多写了一个 <code><td>）：<pre class="brush:php;toolbar:false;"><tr>
<td rowspan="2">头</td>
<td>A</td>
</tr><tr>
<td>B</td>
<td>C</td>
</tr><!-- 这里本该只有 1 个 <td>，因为第1列已被 rowspan 占用 --></pre>
<h3>响应式跨列要小心断点冲突</h3>
<p>Tailwind 的响应式前缀（如 <code>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>，<code>colspan 值无法随屏幕变化，只能靠 JS 动态改属性，或准备两套 DOM 结构。
性能提示：频繁切换 colspan 值会触发重排，比纯 CSS 的 grid 响应式开销更大。
真正麻烦的地方往往不在写法，而在于合并后如何保持垂直居中、边框对齐、以及和表头（<th>）的语义一致性——这些都得靠额外类或 wrapper 元素兜底，不是加个 <code>row-span-3 就万事大吉。
