图表不能直接塞入表格单元格，须以<canvas>或<svg>为子元素并用CSS控制尺寸；需显式设置宽高属性与CSS显示样式，避免拉伸或空白；SVG须内联源码才能交互；动态更新时需手动设最小高度；须用<figure><figcaption>保障可访问性。
不能直接在 <table> 单元格里“塞”一个图表——图表不是表格内容，而是独立可视化组件；正确做法是让图表容器（<canvas> 或 <svg>）作为 <td> 的子元素，再通过 CSS 控制尺寸与对齐。
为什么 <canvas> 放进 <td> 后常被拉伸或空白
浏览器默认把 <canvas> 当作内联元素处理，且其宽高属性是“绘图区域”，不是 CSS 盒模型尺寸。常见错误是只设 width/height 属性却不加 CSS 重置，或用 display: block 后没设 margin: 0 auto 导致错位。
- 必须显式设置
<canvas width="300" height="150">—— 这是渲染分辨率，不是显示大小 - 再用 CSS 控制显示尺寸：
td canvas { width: 100%; height: auto; display: block; } - 避免在
<td>上用text-align: center对齐<canvas>，它不生效；改用margin: 0 auto+display: block - 如果表格用了
table-layout: fixed，需确保<td>有明确宽度（如width: 300px），否则100%会塌缩
<svg> 内联进 <td> 时 hover 和 click 失效
根本原因：SVG 代码没真正进入 DOM 树。用 <img src="chart.svg"> 或 <iframe> 嵌入，内部 <path> 就不可选、不可绑事件、不可被 CSS 作用。
- 必须把 SVG 源码完整复制粘贴到
<td>里，即<td><svg viewBox="0 0 200 100"><rect x="10" y="20"...></svg></td> - 删掉所有子元素的
fill、stroke等内联样式，否则.chart path { fill: red; }不起作用 - 为
<svg>加 class，例如<svg class="chart-svg">，再写 CSS：.chart-svg path:hover { fill: #007bff; } - 绑定 JS 事件要监听
<svg>本身，然后判断e.target.tagName === 'PATH'，而不是直接给每个<path>单独加 listener
动态更新图表数据时，表格单元格不自动撑开高度
<canvas> 和 <svg> 都是“无流式高度”的元素，默认不参与表格行高计算。即使图表内容变多，<tr> 也不会自适应。
立即学习“前端免费学习笔记（深入）”；
- 手动设
<td>最小高度：td.chart-cell { min-height: 180px; } - Canvas 动态重绘后调用
chart.resize()（Chart.js）或手动重设canvas.height = newHeight，再清空重绘 - SVG 动态更新
<path d="...">时，不要删整个<svg>再 innerHTML 替换——会丢失事件绑定；改用svg.querySelector('path').setAttribute('d', newPath) - 若用 Chart.js，别在
<td>上设overflow: hidden，否则响应式图表被裁切
最易被忽略的是：表格语义与图表可访问性冲突。屏幕阅读器会逐行读 <tr>，但不会理解 <canvas> 里的柱状图含义。必须用 <figure><figcaption> 包裹图表，并放在 <td> 内部——不是套在 <table> 外，也不是省略。否则，视力障碍用户根本不知道这个单元格里“有图、是什么图、数据趋势如何”。
