第一行错位是因为未用<thead>包裹标题行，导致浏览器将标题行与数据行平级处理；应明确用<thead>包标题、<tbody>包数据，并统一设置<th>和<td>的对齐方式，价格列用data-price属性保障Excel导出准确。
用 <tr> 排列商品信息时，为什么第一行总错位？
因为 <tr> 本身不定义语义，只负责“一行”，但浏览器默认把没包在 <thead> 或 <tbody> 里的 <tr> 当作普通数据行处理。如果你把标题行（比如“商品名称”“单价”“数量”）直接写成 <tr><td>...</td></tr>，它和后面的数据行在 DOM 结构上完全平级，CSS 样式、可访问性（如屏幕阅读器）和打印适配都会出问题。
正确做法是明确划分结构：
- 用
<thead>包裹标题行，且里面只放一个<tr>（或多个<tr>如果要做多级表头） - 所有商品数据行统一放在
<tbody>内，每行一个<tr> - 避免把
<tr>直接丢在<table>下——这会触发浏览器的容错解析，但不可靠
<td> 和 <th> 混用时价格数字对不齐怎么办？
价格列右对齐是基本要求，但很多人只给 <td> 加 text-align: right，却忘了 <th> 默认居中，导致表头和数据列视觉错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 表头单元格统一用
<th>，并显式设置text-align: left（名称类）或text-align: right（价格/数量类） - 价格列的
<td>加class="price"，CSS 写.price { text-align: right; font-family: monospace; }（等宽字体让小数点对齐更稳） - 避免用空格或 对齐数字——HTML 表格靠结构和样式对齐，不是靠填空
导出 Excel 时价格变成科学计数法，跟 <tr> 有关吗？
无关。Excel 导出结果取决于单元格内容是否被识别为数字，而 <tr> 只是容器。真正踩坑的是：价格写成 <td>¥1,299.00</td>，其中货币符号和逗号会让 Excel 当作文本；或者写成 <td data-value="1299">¥1,299.00</td> 却没在导出逻辑里读取 data-value。
稳妥方案：
- 价格列
<td>同时保留可读文本和机器可读值：<td data-price="1299.00">¥1,299.00</td> - 导出脚本（如 SheetJS）优先读
data-price， fallback 到 innerText 并做正则清洗（innerText.replace(/[^-\d.]/g, '')） - 不要依赖浏览器原生“另存为 Excel”——它对格式识别极弱，必须走 JS 导出库
移动端价格单表格横向滚动卡顿，<tr> 要怎么优化？
不是 <tr> 多导致卡，而是整张表被当做一个不可分割的块渲染。iOS Safari 对 overflow-x: auto 的表格支持差，尤其 <tbody> 内大量 <tr> 时重绘压力大。
轻量级解法：
- 给
<table>加display: block，再给<tbody>加display: block; max-height: 50vh; overflow-y: auto - 每行
<tr>改用display: table-row（保持表格语义），配合width: fit-content防止撑宽 - 价格列固定宽度：
<td style="min-width: 80px; width: 80px;">...，避免重排计算
复杂点在于，<thead> 和 <tbody> 分离滚动后，表头容易在滚动时错位——得用 sticky 或 JS 同步 offsetTop，这个细节多数人一开始会漏掉。
