表格必须用<thead><tbody>分离结构，金额列右对齐用text-align:right+white-space:nowrap，走势用Unicode箭头▲▼—，外层加table-container支持横滑，统一小数位与异常值处理。
表格结构必须用 <thead> 和 <tbody> 明确分离
直接写一长串 <tr> 容易让金额列和走势符号错位，尤其在响应式或 JS 动态更新时。浏览器对未声明表头的表格渲染不一致，<thead> 不仅语义正确，还能让 position: sticky 固定表头生效（比如滚动时始终看到“涨跌幅”列）。
实操建议：
- 所有列名统一放在
<thead><tr>里，每列用<th>，别用<td> - 金额类列（如
price、change_amount）加class="num right"方便后续 CSS 控制对齐 - 走势列（如“涨跌箭头”）用
<td class="trend">，避免和数字列共用样式 - 不要省略
<tbody>—— 即使只有一行数据，也得包上，否则某些 CSS 选择器（如tbody tr:nth-child(even)）会失效
金额右对齐必须用 text-align: right，不能靠空格或
有人用全角空格或 把数字“顶到右边”，这会导致排序混乱、复制粘贴出错、屏幕阅读器误读。CSS 的 text-align: right 是唯一可靠方案。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 给金额列设置
text-align: right同时，务必设white-space: nowrap，防止小数点被换行断开（比如12.345拆成两行） - 如果金额含千分位（如
12,345.67），确保后端返回的是标准格式，或前端用Intl.NumberFormat格式化后再塞进<td>，别在 HTML 里硬写逗号 - 避免对整行
<tr>设text-align—— 走势图标会跟着右移，破坏视觉节奏
走势箭头要用 Unicode 字符或 SVG，别用图片或字体图标
用 <img src="up.png"> 或 <i class="icon-up"> 会增加请求、受字体加载影响、缩放失真。Unicode 箭头（如 ▲、▼）或内联 SVG 最轻量且可控。
推荐做法：
- 涨：用
▲（▲），跌：用▼（▼），平：用—（—）—— 直接写进 HTML，无依赖 - 需要颜色区分时，给
<td class="trend up">▲</td>这样的结构，CSS 控制.trend.up { color: #e60012; } - 若需更精细控制（比如带边框的箭头），用
<svg>内联，宽高设为em单位，随文字大小自适应 - 别用
<span>↑</span>这种混合字符，不同字体下 ↑ 渲染高度不一致，容易和金额行高不匹配
移动端窄屏下金额与走势列容易挤叠，用 min-width + overflow-x 更稳妥
单纯设 table-layout: fixed 加 width: 100% 在手机上常导致文字溢出或横向滚动不灵敏。关键不是隐藏，而是保证最小可读宽度。
解决方案：
- 给
<table>外层包一个<div class="table-container">，设overflow-x: auto和-webkit-overflow-scrolling: touch - 金额列设
min-width: 80px（够显示 “-123.45”），走势列设min-width: 32px（刚好容下 ▲ 和颜色块） - 禁用
font-size: smaller强制缩放 —— 小屏用户宁可横滑，也不要牺牲可读性 - 测试时用真实设备检查：左右拖动是否顺滑？箭头和数字是否始终垂直居中？
表格排版真正的难点不在写法，而在金额小数位数不统一（有的 2 位，有的 4 位）、走势状态有“停牌”“N/A”等异常值，这些边界情况比对齐本身更容易崩掉视觉节奏。
