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