最稳妥的尺码表HTML结构是使用语义化，含、中带scope="col"的、每行首列为scope="row"的，禁用rowspan/colspan。
尺码表 HTML 结构怎么写才符合语义和 SEO
直接用 <table> 是最稳妥的选择，搜索引擎能识别表格语义，屏幕阅读器也支持良好。避免用 <code><div> 模拟表格——不仅增加无障碍成本，还可能被爬虫忽略关键尺寸映射关系。
<p>关键点：</p>
<ul>
<li>必须包含 <code><caption></caption>（如 <caption>女士上衣尺码对照表（单位：cm）</caption>），这是表格的标题，对 SEO 和可访问性都重要
<thead> 里用 <code><th> 标注列头，比如 <code><th scope="col">品牌尺码</th>、<th scope="col">胸围</th>
<tr> 中，首列用 <code><th scope="row">（如 <code><th scope="row">S</th>），明确行含义
rowspan/colspan），会干扰自动解析和移动端渲染怎么让尺码表在手机端不横向滚动
商品页在移动端出现横向滚动，90% 是因为表格内容过宽或字体/内边距没收缩。不能靠 overflow-x: hidden 掩盖问题，那会截断数据。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<table> 加 <code>width: 100%和table-layout: fixed，强制列宽按容器分配 - 用
font-size: 14px或更小控制文字大小，padding改为4px 6px级别 - 把“肩宽”“袖长”等长中文列头缩写为“肩宽(cm)”“袖长(cm)”，减少单列宽度
- 如果实在塞不下，可考虑用响应式切换：PC 显示完整表格，移动端改用
<details><summary>查看尺码对照</summary>...</details>折叠 - 在表格每行
<tr> 上加自定义属性，比如 <code>data-height-min="155"、data-height-max="165"、data-weight-min="45" - 用户填完身高体重后，遍历所有
<tr>，用 JS 判断是否匹配区间，匹配则加 class <code>recommended - 对应 CSS 只需一句：
tr.recommended { background-color: #fff8e1; font-weight: bold; } - 注意边界处理：比如用户填了 165.5cm，要向下取整或用
而非 <code>===判断 - 用浏览器「查看页面源代码」（不是「检查元素」），搜索
<table> —— 如果找不到，说明是 JS 渲染，必须改为服务端输出或预渲染 <li>检查是否有 <code>style="display: none"或父级hidden属性，即使 JS 后来显示了，快照仍视其为不可见 - 避免把整个表格放进
<script type="application/json"></script>再解析，快照不解析脚本内容 - 如果用 Next.js/Nuxt，请确认该模块未设
ssr: false
如何动态高亮推荐尺码（比如根据用户输入身高体重）
纯静态 HTML 无法推荐，必须加轻量 JS。不建议引入 Vue/React，一个 20 行以内的函数就够了。
常见做法：
为什么 Chrome 控制台里能看到尺码表，但百度快照里没有
很可能用了 JS 动态插入表格，或者表格包裹在 v-if、ng-if、display: none 容器里。百度快照依赖服务端直出或静态 HTML，不执行 JS。
排查和修复：
尺码数据本身容易维护错——比如胸围单位混用 cm/inch、S/M/L 对应数值在不同品类间不一致。上线前务必拿真实订单数据反查一次表格里的推荐逻辑是否真能覆盖多数买家。
