必须用<table>而非<div>模拟，首行首列须用带scope属性的<th>明确语义，中间值全用<td>，<thead>不可省略，CSS需协同控制溢出与断行，并兼顾IE11及移动端可访问性。
必须用 <table>，别用 <div> 模拟——结构语义错位会导致屏幕阅读器读成一串乱码，不是“看起来像不像”的问题，是辅助技术根本无法识别哪项功能对应哪个产品。
首行和首列的 <th> 必须加 scope 属性
首行商品名（如“基础版”“旗舰版”）要用 <th scope="col">；首列参数项（如“API 限频”“多语言支持”）必须用 <th scope="row">；中间所有状态值一律用 <td>。
- 错例：
<th>API 限频</th>—— 它不是列标题，应为<td>API 限频</td> - 错例：
<td>旗舰版</td>放在第一列 —— 应为<th scope="row">旗舰版</th> -
<thead>必须存在且包裹首行，不能省略；空单元格写成<td></td>，不能只换行缩进
<table> 的 CSS 控制要点
两列布局下容易横向溢出，但直接给 <table> 加 overflow-x: auto 无效，得靠容器 + 表格自身约束协同控制。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给外层容器设
display: block; overflow-x: auto;，再把<table>套进去 -
<table>自身加table-layout: fixed; width: 100%，防止内容撑破 - 所有
<th>和<td>加word-break: break-word; max-width: 200px; overflow: hidden; text-overflow: ellipsis; - 老浏览器（IE11）要求显式声明
border-collapse: collapse，否则默认双线缝隙
移动端重排不能靠 display: none 隐藏列
小屏强行横向滚动体验差，且键盘焦点会丢失。真正可行的是用 @media 把每行 <tr> 变成垂直区块，并补 data-label 标明字段来源。
立即学习“前端免费学习笔记（深入）”；
- 在
<td>上加data-label="多语言支持"，CSS 用::before { content: attr(data-label) ":" }显示标签 - 避免用
colspan合并功能描述单元格——小屏重排时极易崩，改用单独一行写说明更稳 - 若含图片，务必设
max-width: 100%; height: auto，否则破坏列宽约束
最易被忽略的是：表格语义一旦写错，后续所有 JS 排序、高亮、导出逻辑都会失效——不是样式问题，是 DOM 结构本身已无法被正确解析。
