不用框架也能做，关键在 table 的语义化结构 + 媒体查询控制断点 + 移动端优先的列折叠逻辑；保持 结构，用 scope 属性保障可访问性，小屏通过 display: block + data-label 实现纵向堆叠阅读，禁用 table-layout: fixed 和固定宽高，确保内容自适应。
怎么用纯 HTML + CSS 实现响应式资费表格
直接说结论：不用框架也能做，关键在 table 的语义化结构 + 媒体查询控制断点 + 移动端优先的列折叠逻辑。强行用 div 模拟表格反而难维护、可访问性差，也容易在屏幕缩小时错位。
常见错误是把价格表写成三栏 div 并列，结果小屏时文字挤成一团、价格对不齐、甚至按钮被截断——这不是响应式，是“自欺式布局”。
- 保持
<table> 结构：用 <code><thead> 放套餐名和标题，<code><tbody> 放每项功能对比，<code><th scope="col"> 和 <code><th scope="row"> 标明行列关系，屏幕阅读器能正确读出“基础版｜存储空间｜10GB” <li>移动端用 <code>@media (max-width: 768px)把列转为纵向堆叠：不是隐藏列，而是用display: block+data-label属性把原列头“拎出来”作为每行的前缀 - 避免给
table设固定width或min-width，否则小屏必然横向滚动——让内容决定宽度，靠word-break: break-word控制长文本换行 - 给
<td> 和 <code><th> 加 <code>padding: 0.5rem 0.75rem，小屏下不设padding的单元格会糊成一块 - 用
data-label存列名：<td data-label="月费">¥99</td>，然后在小屏 CSS 里用::before { content: attr(data-label) "："; }自动补上前缀 - 价格数字加
font-weight: bold和单独字号（比如font-size: 1.25rem），比其他描述项更醒目——用户第一眼找的就是这个 - 禁用
table-layout: fixed，它会让小屏下文本被截断；保持默认auto，由内容撑开宽度 - Bootstrap 的
.table-responsive只是包一层div加overflow-x，没解决“列信息丢失”问题 - Vue/React 表格组件依赖数据结构（比如要求数组套对象），但运营同学改价往往直接改 HTML，结构稍一变就报错
- 原生方案上线后几乎零维护：CSS 就那十几行，连注释都写清楚了断点在哪、什么设备生效
- 必须给
<table> 加 <code>role="presentation"吗？不。只有纯装饰性表格才加；资费表是数据表，应保留语义，靠scope属性确保读屏准确 - 打印时去掉所有背景色和阴影，但保留边框：
@media print { table, th, td { background: transparent !important; border: 1px solid #ccc; } } - “立即购买”按钮别用
<a></a>模拟，要用<button type="button"></button>，否则键盘用户按Tab会跳过——资费页转化路径很短，不能卡在这一步 - 深色模式下价格数字如果用纯白色，对比度可能不足（尤其 OLED 屏），建议用
#1a1a1a而非#fff作文字色
CSS 如何让价格表在手机上可读不挤
核心不是“缩放”，而是“重排”。PC 上是横向对比，手机上必须变成单列纵向阅读，否则用户得左右滑动才能看清“含不含 SSL 证书”这种关键项。
典型错误是只加 overflow-x: auto，结果用户要拖拽才能看全一行——这等于没响应式。
立即学习“前端免费学习笔记（深入）”；
为什么不要用 Bootstrap Table 或 Vue 表格组件
除非你整个站都基于那个框架，否则为一个价格表引入几百 KB 的 JS/CSS 是典型“杀鸡用炮”。而且多数组件默认不处理 data-label 前缀逻辑，还得自己写 media query 覆盖。
更实际的问题是：资费表更新频率低（可能半年一调），但框架版本年年升，某天升级后 table-striped 类名失效，或响应式断点变了，你得专门去查文档修——而原生写法改完就忘。
容易被忽略的细节：可访问性与打印适配
很多团队只测 Chrome 和 iPhone，忘了盲人用户靠屏幕阅读器听表格，也忘了销售常要打印 PDF 发给客户。
最麻烦的其实是运营改价：他们习惯复制 Excel 粘贴进后台富文本编辑器，一粘就是带内联样式的 table。与其每次手动清理，不如在 CMS 里限制只允许粘贴纯文本，再用预设模板填入——技术方案得配合流程，不然再好的 CSS 也扛不住乱粘的 style="width: 342px;"。
