结论：别用 布局商品列表。因其语义错位（商品是独立内容项，非二维数据）、响应式崩溃（小屏无法自动换行）、可访问性违规（屏幕阅读器混淆商品上下文）、维护困难（增删角标需改多行嵌套）且SEO不友好。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
直接说结论：别用 用 立即学习“前端免费学习笔记（深入）”； 如果要兼容 IE10+，降级用 Flexbox： 关键点容易被忽略：<table> 布局商品列表。这不是技术限制问题，而是语义错位、响应式崩溃、可访问性违规的组合风险。<hr>
<h3>为什么 <code><table> 渲染商品列表会出问题<ul><li><code><table> 的语义是「二维结构化数据」，比如参数对比表、订单明细、课程表；而商品列表是「一组平行、独立的内容项」，每个 <code><article></article> 才是它的自然容器。<table> 默认不折行，用户必须左右拖拽才能看全——微信公众号、小程序、iOS Safari 都会直接截断或溢出。<li>屏幕阅读器按“行→列”顺序读 <code><tr><td>，把不同商品的图、标题、价格混在一起读，例如：“iPhone 图片、¥7999、MacBook 图片、¥12999……”，完全丢失上下文。<li>每加一个“新品标”或“缺货角标”，就得改所有 <code><tr> 和 <code><td> 嵌套，JS 动态插入时还要手动拼 <code><tr> 字符串，极易漏闭合标签。<hr>
<h3><code><table> 真正该用在哪种商品场景<p>只在以下明确满足「行列强对应 + 多商品横向对比」时才用 <code><table>：<ul>
<li>商品参数对比页（如 iPhone vs Samsung vs Pixel 的屏幕、电池、重量并排展示）</li>
<li>订单详情里的「商品 × 数量 × 单价 × 小计」明细行</li>
<li>后台库存台账（SKU、名称、在库数、预警值、操作）</li>
</ul>
<p>这时必须：</p>
<ul><li>用 <code><thead> 包 <code><tr> 中的 <code><th> 列标题<li>每个数据行用 <code><tbody><tr>，属性名用 <code><th scope="row">（如 <code><th scope="row">存储容量</th>），值用 <td>
<li>设置 <code>table-layout: fixed + width: 100% + word-break: break-word 防止长文本撑破列宽<td>，改用 <code><ul></ul> 或 <data value="red">红</data> 配合 CSS 渲染
替代方案：用什么真正适合商品列表
<article></article> + CSS Grid 是目前最干净的解法：
<article id="prod-1024"></article> 里，语义清晰、SEO 友好、JS 定位直接grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
<img src="..." alt="iPhone 15 Pro">，不能用 background-image —— 否则爬虫和读屏器看不见
display: flex; flex-wrap: wrap; gap: 16px
flex: 1 1 240px（可伸缩、可折行、基础宽度）-webkit-gap 前缀
<table> 不是“能用就行”，而是“用了就埋雷”。哪怕你只是临时赶工、只做内网页面，一旦后续要加无障碍支持、要做微信公众号同步、要接 SEO 工具扫描，那些 <code><tr><td class="card"> 就会立刻暴露为结构性债务。真正省事的做法，是从第一行 HTML 就选对容器。</td></tr>
