应使用 CSS Grid 布局多个独立 <table> 实现多列表格视觉效果，而非滥用 <table> 的 colspan/rowspan 进行页面排版；因后者破坏语义、影响打印、响应式及可访问性。
直接用 <table> 做“多列表格布局”是错的路——它不是用来排版页面结构的，而是展示二维关系数据的。真要实现视觉上多列对齐的表格区域（比如仪表盘里并排 8 张业务表），得靠 CSS Grid 容器包裹多个独立 <table>，而不是在一个 <table> 里硬塞多列 <td>。
为什么不能用 colspan/rowspan 拼多列表格
常见错误是写一堆 <tr><td colspan="2">表A</td><td colspan="2">表B</td></tr>，结果：打印时列宽崩、屏幕缩放后错位、响应式断点失效、语义混乱（<table> 里塞的不是数据，是容器）。更糟的是，colspan 在 <thead> 里一旦和 <tbody> 列数不一致，Chrome 打印预览直接放弃渲染边框。
- 只有当某段信息天然存在「列定义」且 ≥2 行数据时，才该用
<table> -
colspan/rowspan仅用于真实的数据合并场景（如“合计”行跨三列），不是布局工具 - 想让表格并排？把每个
<table>包进单独<div>，再用外部容器控制排列
CSS Grid 布局 8 个独立表格的最小可行写法
核心思路：用一个 display: grid 容器统管位置，每个表格放在 <div> 里作为子项，不碰 <table> 自身的 display 属性。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
```css
#dashboard {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 30% 30% 25% 15%;
gap: 16px;
}
.table-wrapper {
width: 100%;
height: 100%;
}
.table-wrapper > table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
```- 行高用百分比而非固定 px，避免内容溢出或留白过大
- 每个
<div class="table-wrapper"><table>...</table></div>必须设width: 100%; height: 100%，否则表格只按内容撑开 - 别给
<table>设margin或float，所有间距由 Grid 的gap控制
响应式退化时 column-count 不起作用的真相
有人试过给 <div> 加 column-count: 3 想让表格“自动分三列”，但完全没反应——因为 column-count 只对纯文本流生效，对 <table> 这类替换元素（replaced element）无效，且父容器若为 display: grid 或 flex，该属性直接被忽略。
立即学习“前端免费学习笔记（深入）”；
- 多表格并排必须用 Grid 或 Flexbox，
column-count是给<p>、<article>这类文本容器用的 - 移动端列数减少？改 Grid 的
grid-template-columns，比如@media (max-width: 768px) { grid-template-columns: 1fr; } - 如果非要用
column-count，容器内只能放文本节点或inline元素，<table>得先转成display: inline-table并确保父级不是 flex/grid
真正难的不是写出那几行 Grid 代码，而是忍住不用 colspan 去“凑”视觉效果——表格语义一旦污染，后续加筛选、导出 PDF、适配屏幕阅读器都会卡在同一个地方。
