应使用搭建日历骨架：中用7个表示周一至周日，主体用最多6行与填充，空位补并设min-height，日期状态用class控制，点击事件需校验textcontent和classlist。
用 <tr> 和 <code><td> 搭建日历骨架，别硬塞 <code><div>
<p>HTML 表格不是过时的摆设——日历这种强网格结构，<code><table> 仍是语义清晰、兼容性稳、排版省力的选择。强行用 <code><div> + CSS Grid 做月视图，反而容易在 IE 或旧版 Safari 中错行、撑宽。
<p>关键不是“能不能”，而是“怎么搭才不翻车”：</p>
<ul><li><code><thead> 里放 <code><tr> + 7 个 <code><th>（周一到周日），别用 <code><td> —— 语义上这是表头
<li>每月最多 6 行 <code><tr>（6 周 × 7 天 = 42 格），但实际天数只有 28–31，空位必须填 <code><td>（不能留空，否则表格塌陷）
<li>首日不是周一？前导空格用 <code><td></td> 占位，不要写 —— 无内容单元格默认高度为 0，需加 min-height 或空格撑开
填充日期时，<td> 的 class 控制逻辑比内联样式更可靠
<p>直接写 <code>style="color: #999;" 给非本月日期？维护成本高，且无法响应鼠标悬停或选中态。用 class 分离状态更稳妥：
<td class="other-month">30</td>
<td class="today">1</td>
<td class="in-month">2</td>
<td> 的 class 控制逻辑比内联样式更可靠
<p>直接写 <code>style="color: #999;" 给非本月日期？维护成本高，且无法响应鼠标悬停或选中态。用 class 分离状态更稳妥：
<td class="other-month">30</td> <td class="today">1</td> <td class="in-month">2</td>
对应 CSS 可统一控制：
-
.other-month：灰色 +pointer-events: none（禁用点击） -
.today：加背景色 +font-weight: bold，但别用border—— 容易破坏等宽格子对齐 -
.in-month：默认样式，可绑定data-date="2024-04-02"供 JS 读取
点击事件绑定在 <td> 上，但得防冒泡和空单元格误触
<p>用户点空白 <code><td>（比如上月/下月占位格），你不该触发日期选择。JS 判断逻辑要落在内容上：
<ul>
<li>检查 <code>td.textContent.trim() 是否为数字，不是就 return
td.classList，排除 other-month 类<tr> 绑 click —— 点击间隙或 padding 区域会误触发，且无法区分具体哪天
<li>移动端需加 <code>touchstart，但注意 iOS Safari 对空 <td> 的 touch 事件支持不稳定，建议统一用 <code>click
响应式缩放时，<table> 宽度别设死，靠 <code>table-layout: fixed 锁列宽
设 width: 100% 后，小屏下文字挤成一团，甚至换行撑高整行。真正可控的方式是：
- 给
<table> 加 <code>table-layout: fixed - 给每个
<th> 和第一行 <code><td> 设 <code>width: 14.2857%（100% ÷ 7） - 删掉所有
white-space: nowrap—— 允许日期数字折行（如 “10” 变 “1
0” 是灾难，但纯数字一般不会） - 字体用
rem，配合html { font-size: clamp(12px, 2vw, 14px); }动态缩放
复杂点在于跨月衔接和节假日标记——那得靠后端传数据或前端查配置表，表格结构本身只管网格对齐。
