不能用 table 做卡片布局，因其语义错误、可访问性差、响应式失效，且现代 CSS（Grid/Flex）已完全替代；推荐用 Grid 实现自适应网格，辅以 Flex 优化内部结构。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
别用 <table> 做卡片排版——它语义错误、可访问性差、响应式失效，且现代 CSS 已完全替代。<h3>为什么不能用 table 做卡片布局</h3>
<p>表格标签（<code><table>、<code><tr>、<code><td>）的语义是「展示二维关系型数据」，比如课程表、价格对比。把产品卡片塞进 <code><td> 里，等于告诉屏幕阅读器「这是一格数据，不是内容模块」，会导致标题层级丢失、按钮角色被忽略、键盘导航顺序错乱。<ul>
<li>响应式几乎不可行：<code>display: table-cell 在小屏下无法换行，只能横向滚动或内容溢出
auto-fit、aspect-ratio、flex-grow 全部不生效<tr>/<code><td>），无法纯靠 CSS 控制列数<h3>用 Grid 实现自适应卡片网格</h3>
<p>这是当前最推荐的方式，一行声明就能解决列数适配、等高、间隙控制三大问题。</p>
<ul>
<li>基础写法：<code>grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))——小屏单列，中屏双列，大屏自动填满，无需媒体查询gap: 1.5rem 替代所有 margin，避免外边距合并和父容器溢出grid-auto-rows: 1fr 或固定高度（如 250px），防止内容差异导致错位<div class="card"> 内部需用 <code>display: flex; flex-direction: column + flex-grow: 1 + margin-top: auto 控制底部按钮贴底，否则文字长度一变，按钮就会上下跳动用 Flexbox 作为降级或轻量场景方案
Flexbox 不适合复杂卡片列表，但在满足特定条件时仍可用：卡片极少（≤4）、高度一致、不需响应式列数变化、且内部需精细内联对齐（如图标+文字+徽标横排）。
立即学习“前端免费学习笔记（深入）”；
- 关键样式：
display: flex; flex-wrap: wrap; gap: 1rem - 单卡宽度控制必须明确：
flex: 0 0 calc(33.333% - 1rem)（三列）或flex-basis: 300px，否则内容撑开会破坏列数 - IE11 兼容需求下，可用
@supports not (display: grid)条件样式降级为 Flex，但绝不要退回到<table> <li>Flex 的 <code>align-items: stretch在多行时无效，垂直对齐要用align-content，但它在单行时不生效——这个细节常被误设却没反应
真正容易被忽略的点不在外层布局语法，而在卡片内部结构是否稳定：无论用 Grid 还是 Flex，只要卡片自身没用 flex-column + flex-grow 控制内容流，文字增减就会导致视觉跳动——而 <table> 根本无法解决这个问题。</table>
