考勤排班表应使用语义化 ：员工名用 ，日期用 ，状态用 class 控制样式，并用外层容器 + css 处理移动端溢出。
用 <table> 做考勤排班表，核心是行列语义对齐
<p>考勤排班表本质是「人 × 时间」的二维映射，<code><table> 天然适合——但很多人直接套用表格结构，却忽略了语义：员工名该放 <code><th scope="row">，日期该用 <code><th scope="col">，否则屏幕阅读器或导出 Excel 时会错乱。
<p>关键不是画格子，而是让每一行代表一个员工、每一列代表一个日期。这样后续加 CSS 样式、JS 交互或打印适配才不会翻车。</p>
<h3>表头必须区分行头和列头，不能全用 <code><th>
<p>常见错误是把第一行和第一列都写成 <code><th>，没加 <code>scope 属性。结果是：辅助技术无法判断“张三”对应的是哪天，“周一”对应的是谁。
正确做法：
- 第一列（员工姓名）每个单元格用
<th scope="row">张三</th> - 第一行（日期）每个单元格用
<th scope="col">10/1</th> - 左上角空单元格也用
<th></th>，保持结构完整
不加 scope 看似不影响显示，但会影响可访问性、自动化测试识别、甚至某些浏览器打印预览的列对齐逻辑。
考勤状态建议用 class 而非内联 style 控制样式
排班表里常有「出勤」「请假」「调休」「缺勤」等状态，有人习惯写 <td style="background-color: #d4edda;">出勤</td>，这会导致后期改色、加图标、响应式适配非常麻烦。
更可持续的做法：
- 统一定义 class：
<td class="status-on">出勤</td>、<td class="status-leave">请假</td> - 在 CSS 中集中管理：
.status-on { background: #d4edda; color: #155724; } - 需要支持打印时隐藏某类状态？只需加一条
@media print { .status-off { display: none; } }
硬编码颜色还会干扰暗色模式适配，class 是唯一能解耦样式与结构的方式。
移动端窄屏下 table 容易横向溢出，得加一层包裹容器
排班表通常有 7–31 列，手机上直接渲染会强制缩放或出现横向滚动条，体验极差。单纯加 overflow-x: auto 到 <table> 没用，因为 table 本身不响应父容器宽度限制。
<p>必须用容器包裹并设约束：</p>
<pre class="brush:php;toolbar:false;"><div style="overflow-x: auto; max-width: 100%;">
<table>...</table>
</div></pre>
<p>再配合一句 CSS：<code>table { min-width: fit-content; }，才能确保内容不被压缩变形。否则 iOS Safari 会把文字挤成小点，Android Chrome 可能截断最后一列。
真正难的不是画出来，而是让这张表在 HR 导出 PDF、员工用手机查、IE11 打印时都还能认出谁哪天休了假。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
