table 不适合做商品列表，因其语义错误、响应式困难、可访问性差、样式耦合重；商品卡片是独立内容单元，应改用 display: grid 或 flex 布局实现流式陈列与无障碍体验。
table 不适合做商品列表，别用。
现代电商页面里，用 table 展示商品列表会带来语义错误、响应式困难、可访问性差、样式耦合重等问题。它本该表达「二维数据关系」，而商品卡片是独立内容单元，不是行列对齐的报表。
为什么 table 在商品列表里容易翻车
常见错误现象：table 套 tr td 写商品，结果小屏上横向滚动、文字折行错乱、JS 批量操作时节点层级深且不统一；更麻烦的是，屏幕阅读器会把每个 td 当成“单元格数据”，而非“一件商品”，影响无障碍体验。
使用场景错配：只有后台管理页的订单明细、库存报表这类真正需要行列对齐的数据，才该用 table。前台商品陈列是“流式内容集合”，不是表格数据。
兼容性陷阱：IE11 以下虽支持 table，但现代布局需求（如 gap、aspect-ratio、flex-wrap）在 table 里根本没法用，强行 hack 只会让 CSS 越来越臃肿。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
display: grid 实现等宽自适应商品栅格
这是目前最干净、最可控的方案，尤其适合首页/分类页这种多列布局。
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 列宽不小于 280px，容器够宽就自动加列，不用写死列数 -
gap: 16px统一控制间距，比给每个卡片加margin-bottom更可靠（避开 margin 合并问题） -
.product img { height: 180px; object-fit: cover; }防止图片拉伸变形，高度固定 + 裁剪居中 - 老浏览器 fallback：IE11 不支持
auto-fill，可降级为display: flex; flex-wrap: wrap;+flex-basis: 280px
display: flex 做横向滚动商品栏（比如“猜你喜欢”）
适合单行、可滚动、卡片宽度固定的场景，比如推荐位、相关商品。
- 必须三件套：
display: flex+overflow-x: auto+white-space: nowrap（否则卡片会换行） - 每张卡片设
flex: 0 0 240px（不放大、不缩小、固定宽），再加margin-right: 12px - 最后一项去边距：
.product:last-child { margin-right: 0 }，或改用gap: 12px（Safari 14.1+ 支持） - 加
scroll-behavior: smooth提升滚动体验
图文混排别靠 float，也别裸写 div 堆砌
图文混排不是“图+文拼一起”，而是语义与布局协同。电商详情页常见结构：
- 主图区域用
section[role="region"]+tabindex="0"，每张img带具体alt，切换按钮用button并关联aria-controls - SKU 选择用
fieldset+legend，选项用input[type="radio"]，禁用select（无法定制高亮态，移动端体验割裂） - 图文说明模块用
details+summary替代 JS 控制的display: none，原生支持键盘交互，SEO 友好 - 每张说明图配
figure+figcaption，figcaption写清图示内容，不是“图1”“图2”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
