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