核心是结构语义正确、可被JS读取、适配导出筛选：必须用<thead><tbody>明确划分表头与数据，数字列添加data-sort和data-type属性，避免<div>模拟表格。
直接用原生 HTML 写后台统计表格，核心不是“多好看”，而是「结构语义正确、能被 JS 读取、适配后续导出和筛选」——别一上来就套 CSS 框架，先保证 <table> 的骨架不瘸腿。
用 <thead> + <tbody> 划清数据边界
后台表格常要 JS 动态增删行或导出 CSV，如果全用 <tr> 堆砌，脚本很难区分表头和数据。必须显式包裹：
<table>
<thead>
<tr><th>日期</th><th>订单数</th><th>成交额（元）</th></tr>
</thead>
<tbody>
<tr><td>2024-06-01</td><td>142</td><td>28450.00</td></tr>
<tr><td>2024-06-02</td><td>156</td><td>31280.50</td></tr>
</tbody>
</table>
-
<thead>只放真正表头，别塞筛选控件或操作按钮——那些该放表格外层容器里 -
<tbody>是 JS 插入/删除行的唯一目标区域，所有动态逻辑只认它 - 千万别用
<div>模拟表格，Excel 导出和屏幕阅读器会直接失效
数字列加 data-sort 和 data-type 属性
排序功能靠 JS 实现时，纯文本比较会导致 "10" "2" 这种错误。给 <td> 加机器可读的原始值：
<td data-sort="28450.00" data-type="number">¥28,450.00</td> <td data-sort="142" data-type="integer">142</td> <td data-sort="1717228800" data-type="date">2024-06-01</td>
-
data-sort存无格式原始值（去掉 ¥、逗号、百分号），JS 排序时直接取这个值 -
data-type告诉排序函数用哪种规则比对，避免把日期当字符串排 - 别依赖 CSS 类名做类型判断，类名可能被复用或覆盖，
data-属性更可靠
响应式卡死点：别用 table-layout: fixed 硬设列宽
后台表格列多（比如带操作列、状态标签列），硬设宽度会导致小屏下横向滚动条卡住内容，或者文字被截断。稳妥做法是：
立即学习“前端免费学习笔记（深入）”；
- 移除所有
width行内样式和table-layout: fixed - 用
white-space: nowrap控制关键列（如操作列）不换行 - 给长文本列（如商品名称）加
max-width: 200px; overflow: hidden; text-overflow: ellipsis; - 真要横向滚动，只对
<table>外层容器设overflow-x: auto，别套在<td>上
最易被忽略的是空状态处理——没数据时 <tbody> 为空，但得留一行提示，否则表格高度塌缩，UI 布局错乱。别写 <tr><td colspan="3">暂无数据</td></tr>，而要用 <tr class="empty-row"><td colspan="3">暂无数据</td></tr>，方便 CSS 单独控制样式且不干扰 JS 行计数逻辑。
