用做时间表可行，但需语义化结构（设时间段、设工作日）、禁用默认边框（border-collapse: collapse）、控制列宽（min-width+table-layout: fixed）、移动端转卡片式布局（display: block+flex堆叠），并规范空单元格与颜色系统。

直接用 <table> 做时间表完全可行，但容易卡在“样式乱、列宽失控、移动端崩”这三点上。关键不是堆 CSS，而是从结构设计开始控制节奏。 <h3>先用语义化结构搭骨架，别急着加样式</h3> <p>时间表本质是“行=星期、列=时间段”，所以 <code><thead> 放时间段（含合并单元格），<code><tbody> 每行一个工作日。避免用 <code>colspan 和 rowspan 随意拉扯，否则后续样式会失效。

• <th> 只用于第一行（时间段标题）和第一列（星期名称），其他全用 <code><td> <li>中午休息这类跨多行的单元格，用 <code>rowspan 比 colspan 更稳定（例如午休占 6 行，就写 rowspan="6"）
• 避免在 <table> 上设固定宽度，改用 <code>min-width + table-layout: fixed 控制列宽均匀

  border-collapse: collapse 必须开，否则双线边框毁所有

  浏览器默认给 <table> 加分离边框（<code>border-collapse: separate），导致相邻单元格之间有白缝，时间表看着像拼图。不关掉它，后面加背景色、圆角、阴影全是白费劲。

  • 必须写：table { border-collapse: collapse; }
  • 如果某列要突出（比如“星期”列），单独给 <td> 或 <code><th> 加 <code>border-right，别依赖默认边框
  • 移动端小屏时，border-collapse 仍有效，但需配合 overflow-x: auto 包裹容器，防止横向溢出

  让文字对齐和留白真正起作用

  时间表最怕文字挤成一团或悬空——不是 padding 不够，而是没区分内容类型。数字型时间（如 09:30-10:20）和课程名（如 HTML）需要不同对齐方式。

  • <th>（时间段）用 <code>text-align: center，padding: 8px 4px（上下留白少、左右稍多）
  • <td>（课程名）用 <code>text-align: center，但 padding: 12px 8px，避免文字贴边
  • 星期列（第一列）可加 font-weight: bold 和 background-color: #f5f5f5，视觉锚点更清晰
  • 慎用 vertical-align: middle：表格默认就是 middle，乱加反而破坏行高一致性

  响应式不是加个媒体查询就完事

  时间表在手机上撑不开，硬缩字体只会看不清。真正的解法是放弃“横排”，改用垂直堆叠——但不是靠 JS 重排 DOM，而是用 CSS 把每行变成独立卡片。

  
  html-to-pptx
  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
  下载
  • 关键 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，方便后期一键调明暗度适配夜间模式。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！