用<table>做时间表可行，但需语义化结构（<thead>设时间段、<tbody>设工作日）、禁用默认边框（border-collapse: collapse）、控制列宽（min-width+table-layout: fixed）、移动端转卡片式布局（display: block+flex堆叠），并规范空单元格与颜色系统。
直接用 <table> 做时间表完全可行，但容易卡在“样式乱、列宽失控、移动端崩”这三点上。关键不是堆 CSS，而是从结构设计开始控制节奏。
先用语义化结构搭骨架，别急着加样式
时间表本质是“行=星期、列=时间段”，所以 <thead> 放时间段（含合并单元格），<tbody> 每行一个工作日。避免用 colspan 和 rowspan 随意拉扯，否则后续样式会失效。
-
<th>只用于第一行（时间段标题）和第一列（星期名称），其他全用<td> - 中午休息这类跨多行的单元格，用
rowspan比colspan更稳定（例如午休占 6 行，就写rowspan="6"） - 避免在
<table>上设固定宽度，改用min-width+table-layout: fixed控制列宽均匀
border-collapse: collapse 必须开，否则双线边框毁所有
浏览器默认给 <table> 加分离边框（border-collapse: separate），导致相邻单元格之间有白缝，时间表看着像拼图。不关掉它，后面加背景色、圆角、阴影全是白费劲。
- 必须写：
table { border-collapse: collapse; } - 如果某列要突出（比如“星期”列），单独给
<td>或<th>加border-right，别依赖默认边框 - 移动端小屏时，
border-collapse仍有效，但需配合overflow-x: auto包裹容器，防止横向溢出
让文字对齐和留白真正起作用
时间表最怕文字挤成一团或悬空——不是 padding 不够，而是没区分内容类型。数字型时间（如 09:30-10:20）和课程名（如 HTML）需要不同对齐方式。
立即学习“前端免费学习笔记（深入）”；
-
<th>（时间段）用text-align: center，padding: 8px 4px（上下留白少、左右稍多） -
<td>（课程名）用text-align: center，但padding: 12px 8px，避免文字贴边 - 星期列（第一列）可加
font-weight: bold和background-color: #f5f5f5，视觉锚点更清晰 - 慎用
vertical-align: middle：表格默认就是 middle，乱加反而破坏行高一致性
响应式不是加个媒体查询就完事
时间表在手机上撑不开，硬缩字体只会看不清。真正的解法是放弃“横排”，改用垂直堆叠——但不是靠 JS 重排 DOM，而是用 CSS 把每行变成独立卡片。
- 关键 CSS：
@media (max-width: 768px) { table, thead, tbody, th, td, tr { display: block; } } - 然后给
tr设margin-bottom: 12px，把每行当一个块级单元处理 -
th:first-child, td:first-child提取为“标题”，用::before伪元素标注“星期一：”，再把其余td内容用display: flex; flex-direction: column堆起来 - 这个方案不依赖 JS，也不破坏语义，屏幕阅读器仍能按原顺序读取
最常被忽略的是：时间表里“空单元格”要不要留白？留，但统一用 占位，别留空字符串——否则 padding 失效，高度塌陷。另外，所有颜色值建议用 HSL 而非 HEX，方便后期一键调明暗度适配夜间模式。
