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