应使用语义化 <table> 结构实现收支明细列表，配合 datetime 属性、.income/.expense 类名、右对齐金额、纯文本符号（如 -¥120.00），移动端用 CSS 媒体查询转为垂直 dl 布局，并确保导出与可访问性兼容。
怎么用纯 HTML + CSS 实现可读性强的收支明细列表
纯 HTML 做收支明细页，本质不是“能不能显示”，而是“用户扫一眼能否立刻分清收入、支出、日期、余额”。浏览器不认“收支”语义，只认 <table>、<dl> 或带语义类名的 <div>。所以第一原则：结构先行，样式后置。
推荐用 <table> —— 它天然适配行列对齐、响应式（配合 overflow-x: auto）、屏幕阅读器识别率高。别为了“语义化洁癖”硬套 <section> + <article>，反而让金额列错位、小屏看不全。
常见错误现象：
• 用一堆 <div class="item"> 模拟列表，结果在 iOS Safari 上文字换行把“-¥120.00”拆成两行
• 日期写成 2024/05/20 但没加 datetime 属性，排序或导出时无法被程序识别
• 收入用绿色、支出用红色，但没同时加图标或文字标识（色盲用户直接丢失关键信息）
- 每行必须包含：日期（
<time datetime="2024-05-20">2024-05-20</time>）、摘要、类型（“收入”/“支出”）、金额（带符号或颜色区分）、余额（可选） - 金额列右对齐，使用
text-align: right；负数统一前置-符号，不要用括号或红字替代逻辑 - 给支出行加
class="expense"，收入行加class="income"，CSS 里用.expense { color: #e53935; }而非直接写style="color:red"
如何让流水列表在手机上不横向滚动还能看清金额
小屏看不清明细，根本原因不是字体小，而是列太多挤在一起。解决思路不是“缩放”，而是“折叠非核心字段”或“切换布局”。
立即学习“前端免费学习笔记（深入）”；
最简方案：用 CSS @media 把桌面端的 <table> 在手机上转为垂直堆叠的 <dl> 结构。不需要 JS，纯 CSS 可控。
关键点：
• 不要隐藏整列（比如藏掉“摘要”），用户可能正靠它区分两笔“微信转账”哪笔是发红包哪笔是收款
• “余额”列在移动端优先级最低，可设为 display: none，但得保留在 HTML 中供辅助技术读取
- 桌面端保持
<table>，移动端用@media (max-width: 480px) { table, thead, tbody, th, td, tr { display: block; } }配合th:first-child { position: absolute; clip: rect(0 0 0 0); }提取表头语义 - 每行数据用
<div class="row">包裹，内部用<span class="label">日期</span><span class="value">2024-05-20</span>模式，方便 CSS 控制换行和间距 - 金额数字用
<span class="amount">-¥120.00</span>单独包裹，避免“¥”被孤立换行
为什么不能直接用 JavaScript 渲染流水数据（比如 fetch 后 innerHTML）
能跑通 ≠ 该这么做。收支页面常被截图、转发、存档，甚至嵌入到银行/记账 App 的 WebView 中。JS 渲染带来三个实际风险：
• 网络失败时页面空白，用户不知道是没数据还是加载异常
• SEO 和分享卡片抓取不到内容（微信/QQ 内置浏览器不执行 JS）
• 屏幕阅读器在 JS 注入完成前已开始朗读，可能跳过首几条记录
- 静态 HTML + 数据内联（如
<script type="application/json" id="transaction-data">[...]</script>）是更稳妥的选择：服务端吐出完整 HTML，JS 仅用于交互增强（如筛选、导出） - 如果必须动态加载，至少提供
<noscript>版本的表格，或 fallback 到服务端渲染的静态快照 - 避免用
document.write()或直接innerHTML = "<tr>..."，XSS 风险高，且破坏 DOM 可访问性树
导出 Excel 或打印 PDF 时金额格式错乱怎么办
浏览器原生打印或第三方库（如 SheetJS）读取 HTML 表格时，依赖的是 DOM 结构的规范性，而非视觉样式。错乱往往发生在：金额用了 CSS 伪元素添加“¥”，或用空格对齐小数位，或把“-120.00”写成“¥120.00”再靠颜色表示负数。
导出时真正被识别的，只有 textContent。所以“¥”必须写在 HTML 里（<td>¥-120.00</td>），不能靠 ::before 生成；负号必须是真实字符，不能靠 transform: scaleX(-1) 反转。
- 金额单元格内容应为纯文本：收入写
¥120.00，支出写-¥120.00（注意符号顺序），避免用¥120.00-或(¥120.00) - 小数位统一保留两位，后端或模板层处理好（
toFixed(2)不够，需考虑四舍五入和负数），不要靠 CSSfont-variant-numeric: tabular-nums假装对齐 - 打印样式表中禁用所有背景色、浮动、绝对定位，用
@media print { .no-print { display: none; } }隐藏操作按钮
最易被忽略的一点：时间字段的 datetime 属性值必须是 ISO 8601 格式（2024-05-20T09:30），否则 Excel 导入时可能识别成普通文本而非日期类型——这会让求和、筛选、图表全失效。
