第一行对不齐是因为表头与日期单元格的colspan混用导致列宽重算，解决方法是统一用7列填充，前置空白设class="empty"且不设内容，表头用包裹，禁用table-layout:fixed除非手动设列宽。

用 <table> 做日历时，为什么第一行总对不齐？ <p>因为日历表头（周一到周日）和实际日期单元格的 <code>colspan / rowspan 混用后，浏览器会按 HTML 表格模型重新计算列宽，尤其当某月 1 号落在周三，前两列用 <td> 占位但没设 <code>width 或 min-width，就会被压缩。解决思路不是强行加空格，而是统一用 <td> 填满 7 列，空日期单元格设 <code>aria-hidden="true" 并加 class="empty" 控制样式：

• 每月生成 6 行 × 7 列（最多 42 天），不管当月几天
• 前导空白用 <td class="empty"></td>，不写内容也不设 nbsp;
• 表头用 <thead> 包裹 <code><tr>，避免被 <code>colspan 干扰
• 禁用 table-layout: fixed 除非你手动设每列 width —— 否则首行宽度会被后续内容撑开

rowspan 在跨日事件中怎么不撕裂表格结构？

想让“会议：9:00–17:00”横跨当天所有小时行，直接对 <td> 设 <code>rowspan="8" 很危险：一旦某天有 2 个跨日事件，或中间插入了节假日分隔线，rowspan 就会错位甚至崩溃。真正稳的做法是放弃在日历主表里用 rowspan，改用绝对定位叠加：

• 日历主体只负责网格骨架（日期 + 时间刻度），所有事件用 <div class="event"> 放在独立 <code><div class="calendar-events"> 容器里 <li>每个 <code>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> 设为 <code>display: block，内部 <tr> 改 <code>display: flex; flex-direction: column
• 每行 <td> 变成块级，用 <code>flex: 1 均分高度，再用 data-day="15" 属性标记日期，靠 JS 把当天事件聚合到对应块里
• 更轻量的方案：小屏直接切到单日视图，用 <section></section> + <time></time> 替代表格，保留语义但放弃网格感
• 千万别用 transform: scale(0.8) 缩放整个 table —— 点击区域变小、字体发虚、iOS Safari 渲染异常

用 <table> 还是 <code><div> 实现日历？关键看这三点 <p>不是技术先进性问题，是语义、维护成本和交互深度的权衡：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>纯展示型月视图（无拖拽、无点击展开）、需屏幕阅读器正确朗读“X月Y日 星期三”，<code><table> 是唯一合规选择 —— <code><role></role> 模拟成本高且兼容性差

如果要支持“拖动调整会议时间”，<div> + CSS Grid 更灵活：能自由设置 <code>grid-row-start、监听 dragover 事件，而 <table> 的 <code>rowspan 会让拖拽目标判断失效

服务端渲染场景下，<table> 的 HTML 体积比同等功能的 div 布局小 30%+（少一堆 class 和嵌套），首屏更快，但前提是后端能精确计算空白单元格数量 <p>复杂点在于：同一日历组件常需同时满足无障碍要求和拖拽编辑能力。这时候真正的解法不是二选一，而是用 <code><table> 输出基础结构，再用 JS 动态挂载事件层和浮动面板 —— 表格管“是什么”，JS 管“怎么动”。</table>