工资条页面不必强制用表格，但用最稳妥，因其语义清晰、兼容屏幕阅读器、打印及Excel复制；需避免嵌套与滥用colspan/rowspan，禁用role="presentation"。

工资条页面必须用表格吗？

不用，但用

是最稳妥的选择。工资条本质是行列对齐的结构化数据：姓名、基本工资、绩效、扣款、实发——这些字段天然适合表格语义。用 div + flex 虽然能实现视觉对齐，但屏幕阅读器识别困难，打印时容易错行，且 Excel 复制粘贴会丢失列关系。

实操建议：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 用

包裹整体， 放表头（如“应发工资”“代扣社保”）， 每条记录一个

避免嵌套表格或用 colspan/rowspan 合并单元格，除非真有合并需求（比如“部门汇总”行）

给表格加 role="presentation" 仅当它纯作布局用——工资条不是，别加

怎么让工资条支持打印和 PDF 导出？

浏览器原生打印支持良好，但默认会截断、丢样式、漏页眉页脚。关键不是“导出 PDF”，而是先确保打印预览可用。

实操建议：

• 用 @media print 重置样式：body { font-size: 12px; }，隐藏非工资条元素（如导航栏加 display: none）
• 强制分页：在每条工资条末尾加
  ，但注意最后一条别加，否则多出空白页
• 字体选无衬线且本地存在的：优先用 "Helvetica Neue", Arial, sans-serif，避免用 Web Font（打印时可能回退成宋体）
• 导出 PDF 不要用前端 JS 库（如 jsPDF + html2canvas）渲染复杂表格——中文易乱码、金额对不齐；直接后端生成更可靠

金额数字右对齐但小数点要对齐，怎么写 CSS？

CSS 本身不支持小数点对齐，但有成熟取巧方案：用等宽字体 + 预格式化文本，或用 text-align: right + 隐藏千分位符。

实操建议：

• 最简方案：所有金额列设 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 页面是静态的，怎么防查看源码？

HTML 页面无法真正隐藏数据——只要工资条内容在 DOM 里，右键“查看页面源代码”或 DevTools 就能看到。所谓“防查看”其实是防误触、防批量抓取，不是加密。

实操建议：

• 每个工资条只渲染当前登录员工的数据，服务端控制：返回 HTML 前就过滤掉其他人的

不要把全员工资塞进一个 JSON 丢到 <script></script> 标签里再 JS 渲染——这等于裸奔

敏感字段（如个税、公积金基数）可服务端脱敏：显示 "****.**" 而非真实值，需查看详情再走权限接口拉取

禁用开发者工具没意义，但可以加 oncontextmenu="return false" 阻止右键菜单（仅防手滑，不防技术用户）

工资条页面真正的难点不在样式，而在数据边界控制：谁能看到谁的条、哪些字段允许导出、打印时要不要盖“仅供个人查阅”水印——这些都得在服务端做判断，前端只是忠实呈现。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！