工资条页面不必强制用表格，但用最稳妥，因其语义清晰、兼容屏幕阅读器、打印及Excel复制；需避免嵌套与滥用colspan/rowspan，禁用role="presentation"。
工资条页面必须用表格吗？
不用，但用 <table> 是最稳妥的选择。工资条本质是行列对齐的结构化数据：姓名、基本工资、绩效、扣款、实发——这些字段天然适合表格语义。用 <code>div + flex 虽然能实现视觉对齐，但屏幕阅读器识别困难，打印时容易错行，且 Excel 复制粘贴会丢失列关系。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
<table> 包裹整体，<code><thead> 放表头（如“应发工资”“代扣社保”），<code><tbody> 每条记录一个 <code><tr> <li>避免嵌套表格或用 <code>colspan/rowspan合并单元格，除非真有合并需求（比如“部门汇总”行） - 给表格加
role="presentation"仅当它纯作布局用——工资条不是，别加 - 用
@media print重置样式：body { font-size: 12px; }，隐藏非工资条元素（如导航栏加display: none） - 强制分页：在每条工资条末尾加
<div style="page-break-after: always;"></div>，但注意最后一条别加，否则多出空白页 - 字体选无衬线且本地存在的：优先用
"Helvetica Neue", Arial, sans-serif，避免用 Web Font（打印时可能回退成宋体） - 导出 PDF 不要用前端 JS 库（如 jsPDF + html2canvas）渲染复杂表格——中文易乱码、金额对不齐；直接后端生成更可靠
- 最简方案：所有金额列设
text-align: right; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;，再统一保留两位小数（后端或 JS 格式化为"12345.67"） - 别用
direction: rtl强行右对齐数字——会导致负号位置错乱（如"-123.45"变成"54.321-"） - 如果必须显示千分位（如
12,345.67），就放弃小数点严格对齐，改用固定宽度容器 +text-align: right，靠视觉近似 - 每个工资条只渲染当前登录员工的数据，服务端控制：返回 HTML 前就过滤掉其他人的
<tr> <li>不要把全员工资塞进一个 JSON 丢到 <code><script></script>标签里再 JS 渲染——这等于裸奔 - 敏感字段（如个税、公积金基数）可服务端脱敏：显示
"****.**"而非真实值，需查看详情再走权限接口拉取 - 禁用开发者工具没意义，但可以加
oncontextmenu="return false"阻止右键菜单（仅防手滑，不防技术用户）
怎么让工资条支持打印和 PDF 导出？
浏览器原生打印支持良好，但默认会截断、丢样式、漏页眉页脚。关键不是“导出 PDF”，而是先确保打印预览可用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
金额数字右对齐但小数点要对齐，怎么写 CSS？
CSS 本身不支持小数点对齐，但有成熟取巧方案：用等宽字体 + 预格式化文本，或用 text-align: right + 隐藏千分位符。
实操建议：
立即学习“前端免费学习笔记（深入）”；
员工看不到别人工资，但 HTML 页面是静态的，怎么防查看源码？
HTML 页面无法真正隐藏数据——只要工资条内容在 DOM 里，右键“查看页面源代码”或 DevTools 就能看到。所谓“防查看”其实是防误触、防批量抓取，不是加密。
实操建议：
立即学习“前端免费学习笔记（深入）”；
工资条页面真正的难点不在样式，而在数据边界控制：谁能看到谁的条、哪些字段允许导出、打印时要不要盖“仅供个人查阅”水印——这些都得在服务端做判断，前端只是忠实呈现。
