应使用 CSS Grid 或 Flexbox 实现卡片布局，而非 table：因 table 违背语义、损害可访问性、响应式失效、无法使用现代布局特性；Grid 的 auto-fit 与 gap 可自动适配多端，Flex 可降级兼容旧浏览器，且卡片内部需用 flex-column + flex-grow 保证结构稳定。
别用表格实现卡片式布局——它违背语义、破坏可访问性、响应式几乎不可行，且现代 CSS 已完全替代。
为什么 <table> 不适合卡片布局
表格标签（<table>、<tr>、<td>）的语义是「展示二维关系型数据」，比如价格对比表、课程时间表。把产品卡片塞进 <td> 里，等于告诉屏幕阅读器「这是一格数据，不是内容模块」，会跳过标题层级、忽略按钮角色、打乱导航顺序。
- 响应式失效：表格强制按行/列渲染，
display: table-cell在小屏下无法换行，只能横向滚动或内容溢出 - 等高对齐假象：看似所有
<td>高度一致，实则靠表格内部隐式拉伸，一旦内容超长或图片加载失败，整行错位 - 无法使用现代布局控制：
gap、auto-fit、aspect-ratio、flex-grow全部不生效 - 维护成本高：增删卡片要改 HTML 结构（加
<tr>/<td>），不能靠 CSS 控制列数
grid-template-columns: repeat(auto-fit, ...) 是真正能替代表格的方案
你想要的「自动等宽、换行整齐、间隙可控」，display: grid 一行声明就能解决，且语义干净、无障碍友好、打印可用。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 小屏单列，中屏双列，大屏自动填满，无需媒体查询 -
gap: 1.5rem替代所有margin，避免外边距合并、父容器溢出、末尾空白等问题 - 每张卡片用
<article class="card">或纯<div class="card">，语义比<td>明确得多 - 兼容性：Chrome 66+、Firefox 61+、Safari 16.4+、Edge 79+，覆盖全部主流现代浏览器
如果必须兼容 IE11，也别退回到 <table>
IE11 不支持 grid 的 auto-fit，但仍有比表格好得多的选择：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex+flex-wrap: wrap，配合flex: 0 0 calc(33.333% - 1rem)实现三列（gap 用 padding 模拟） - 加
@supports not (display: grid)条件样式，让现代浏览器走 Grid，旧浏览器降级为 Flex - 绝对不要用
<table>做布局——即使为了兼容，它的代价（SEO 损失、WCAG 不合规、后续重构成本）远高于写两套 CSS
真正容易被忽略的点：卡片内部结构是否稳定。无论外层用 Grid 还是 Flex，卡片自身必须用 display: flex; flex-direction: column + flex-grow: 1 + margin-top: auto 控制底部贴底；否则文字长度一变，按钮就会上下跳动——这个细节，表格完全无法解决。
