应使用css grid或flexbox而非table布局商品列表，因商品列表是平行项流式结构，非二维数据关系；table会导致响应式困难、可访问性差、维护成本高及seo不友好。

直接用 <table> 做商品列表是过时且不灵活的，现代页面应该用 <code>flexbox 或 grid ——除非你真在写邮件模板或需要兼容 IE8。

为什么不用 <table> 布局商品列表<p>表格语义是“二维数据关系”，比如价格对比表、规格参数表；而商品列表本质是“一组平行项”，每个商品有图、标题、价格、操作按钮，结构上更接近流式卡片。强行用 <code><table> 会导致：<ul> <li>响应式困难：无法让商品在小屏自动换行，<code>colspan 和 rowspan 会破坏布局逻辑

可访问性差：屏幕阅读器会按行列读，把不同商品混在一起

维护成本高：加个“缺货标签”或“新品角标”，就得改多行 <tr><td><li>SEO 不友好：搜索引擎不认为 <code><table> 里的商品是独立实体<h3>用 <code>display: grid 实现等宽商品网格

适合固定列数（如 PC 端 4 列、平板 2 列、手机 1 列），代码简洁、对齐精准：

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

关键点：

• minmax(240px, 1fr) 表示每列最小 240px，剩余空间均分 —— 不用媒体查询就能响应式
• auto-fill 让容器尽可能塞满列，空列也会保留位置（避免最后一行左对齐）
• 如果想严格控制列数（比如必须 3 列），改用 repeat(3, 1fr)，再配合 @media 调整
• 注意：IE 不支持 grid，若需兼容，得 fallback 到 flex

用 display: flex 实现流式商品列表

更适合内容高度不一的商品（比如标题行数不同），且兼容性更好（IE10+）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.product-item {
  flex: 1 1 240px; /* 可伸缩、可折行、基础宽度 240px */
}

常见问题：

• 小屏下商品没占满整行？检查父容器是否有 flex-wrap: wrap，以及子项是否设了 min-width 阻止压缩
• 最后一行左对齐难看？加 justify-content: space-between 无效时，用伪元素补足空白项，或改用 grid
• gap 在旧版 Safari 需要 -webkit-gap 前缀

别忽略语义和辅助功能

即使不用 <table>，也要让商品结构清晰：<ul><li>每个商品用 <code><article></article> 包裹，而不是无意义的 <div> <li>图片必须有 <code>alt 属性，哪怕只是商品名；如果是纯装饰图，写 alt=""

价格数字用 <span aria-label="¥299">¥299.00</span>，避免屏幕阅读器读成“二百九十九点零零”

“加入购物车”按钮要有明确的 type="button"，防止表单意外提交

真正麻烦的从来不是“怎么排成一行”，而是“怎么让不同设备、不同用户都正确理解这是个可操作的商品”。grid 和 flex 只是工具，语义和行为才是骨架。