colspan用于单行单元格横向跨列展开，需与表格总列数一致；border-spacing仅在border-collapse: separate下生效，控制列间物理间距；details+summary可实现无JS行内展开，但须置于td内并配合colspan；CSS Grid更灵活，适合非语义化排版。
用 colspan 实现单行内容横向展开（最常用）
想让某一行里的一个单元格“撑满整行”，本质是让它跨越所有列，而不是靠 padding 或 width 硬撑。直接写 colspan="3" 这类值就行，但必须和表格总列数对得上。
- 如果表格有 3 列（
<th>或<td>共 3 个），那colspan="3"就能占满整行宽度 - 如果用了
<thead>/<tbody>，要确保每行实际单元格数一致；否则colspan会错位或被浏览器忽略 -
colspan="0"在现代浏览器中无效，别用；也不要写成colspan="auto"—— 它不是合法值 - 示例：
<tr><td colspan="3">这行内容横跨全部三列</td></tr>
用 border-spacing 控制列间水平空隙（不是内容间距）
border-spacing 是唯一真正控制“列与列之间物理距离”的 CSS 属性，但它只在 border-collapse: separate 下生效 —— 这点 90% 的人会漏掉。
- 必须显式给
<table>元素设置border-collapse: separate，写在<td>或<tr>上没用 -
border-spacing: 12px 4px表示列距 12px、行距 4px；顺序不能颠倒，也不支持百分比或负值 - 第三方组件（如 Element Plus、Ant Design）默认用
collapse，得加!important覆盖才生效 - 如果只是想让文字离左边框远一点，改
padding-left更直接；border-spacing管的是单元格边框之间的空隙，不是内容留白
用 details + summary 做行内详情展开（无 JS 方案）
需要点击后“水平展开”额外内容？比如表格末尾一个单元格点开显示更多字段 —— details 是原生、轻量、可访问的解法，但要注意 DOM 合法性。
- 不能把整个
<tr>包进<details>，HTML 规范不允许；正确做法是把<details>放在某个<td>内，且该<td>用colspan跨越剩余列数 -
summary必须保留，删了就失去默认折叠交互和屏幕阅读器支持 - Safari ≤15.4 有渲染 bug，若需兼容旧版 iOS，得切到 JS 方案（用
dataset+toggleAttribute） - 示例：
<td colspan="2"><details><summary>展开详情</summary><p>邮箱：x@y.z</p></details></td>
用 CSS Grid 替代 <table> 实现更灵活的水平布局
当表格语义不强、只是借形排版（比如仪表盘卡片、配置项分组），用 CSS Grid 比硬套 <table> 更可控，也更容易做响应式水平展开。
立即学习“前端免费学习笔记（深入）”；
- 不用管
colspan对不对齐，直接用grid-column: 1 / -1让某一项横跨整行 - 列宽可用
fr、minmax()或auto动态分配，比table-layout: fixed更适应内容变化 - 缺点：失去表格的语义化和默认可访问性（如表头关联、快捷键导航），适合展示型场景，不适合数据报表
- 关键样式：
display: grid; grid-template-columns: 1fr 2fr 1fr;，然后对目标项加grid-column: 1 / -1;
最容易被忽略的是：colspan 看似简单，但一旦表格结构嵌套了 <thead>/<tbody> 或用了动态列生成，列数计算就容易出错；而 border-spacing 的生效前提（separate）常被全局样式覆盖，调试时务必用 DevTools 的 Computed 面板确认真实值。
