第一行对不齐是因为表头与日期单元格的colspan混用导致列宽重算，解决方法是统一用7列<td>填充，前置空白设class="empty"且不设内容，表头用<thead>包裹，禁用table-layout:fixed除非手动设列宽。
用 <table> 做日历时，为什么第一行总对不齐？
因为日历表头（周一到周日）和实际日期单元格的 colspan / rowspan 混用后，浏览器会按 HTML 表格模型重新计算列宽，尤其当某月 1 号落在周三，前两列用 <td> 占位但没设 width 或 min-width，就会被压缩。解决思路不是强行加空格，而是统一用 <td> 填满 7 列，空日期单元格设 aria-hidden="true" 并加 class="empty" 控制样式：
- 每月生成 6 行 × 7 列（最多 42 天），不管当月几天
- 前导空白用
<td class="empty"></td>，不写内容也不设nbsp; - 表头用
<thead>包裹<tr>，避免被colspan干扰 - 禁用
table-layout: fixed除非你手动设每列width—— 否则首行宽度会被后续内容撑开
rowspan 在跨日事件中怎么不撕裂表格结构？
想让“会议：9:00–17:00”横跨当天所有小时行，直接对 <td> 设 rowspan="8" 很危险：一旦某天有 2 个跨日事件，或中间插入了节假日分隔线，rowspan 就会错位甚至崩溃。真正稳的做法是放弃在日历主表里用 rowspan，改用绝对定位叠加：
- 日历主体只负责网格骨架（日期 + 时间刻度），所有事件用
<div class="event">放在独立<div class="calendar-events">容器里 - 每个
event通过 JS 计算 top / height（例如 9:00 对应第 18 行，高度 = 8 行 × 行高） - CSS 中设
.calendar-events { position: relative; }，.event { position: absolute; } - 避免用
rowspan的另一个原因是：打印时它常被截断，而绝对定位元素可配合@media print单独控制
响应式日历表格在小屏上怎么不变成横向滚动条？
手机上看 7 列日历，字体一缩就糊成一片，硬塞只会触发横向滚动。别试图用 overflow-x: auto 换取“能看”，用户根本不会左右拖。真实可行的降级路径是：
- 媒体查询断点设在
max-width: 480px，此时把<table>设为display: block，内部<tr>改display: flex; flex-direction: column - 每行
<td>变成块级，用flex: 1均分高度，再用data-day="15"属性标记日期，靠 JS 把当天事件聚合到对应块里 - 更轻量的方案：小屏直接切到单日视图，用
<section>+<time>替代表格，保留语义但放弃网格感 - 千万别用
transform: scale(0.8)缩放整个 table —— 点击区域变小、字体发虚、iOS Safari 渲染异常
用 <table> 还是 <div> 实现日历？关键看这三点
不是技术先进性问题，是语义、维护成本和交互深度的权衡：
立即学习“前端免费学习笔记（深入）”；
- 纯展示型月视图（无拖拽、无点击展开）、需屏幕阅读器正确朗读“X月Y日 星期三”，
<table>是唯一合规选择 ——<role="grid">模拟成本高且兼容性差 - 如果要支持“拖动调整会议时间”，
<div>+ CSS Grid 更灵活：能自由设置grid-row-start、监听dragover事件，而<table>的rowspan会让拖拽目标判断失效 - 服务端渲染场景下，
<table>的 HTML 体积比同等功能的 div 布局小 30%+（少一堆 class 和嵌套），首屏更快，但前提是后端能精确计算空白单元格数量
复杂点在于：同一日历组件常需同时满足无障碍要求和拖拽编辑能力。这时候真正的解法不是二选一，而是用 <table> 输出基础结构，再用 JS 动态挂载事件层和浮动面板 —— 表格管“是什么”，JS 管“怎么动”。
