周工作计划表应采用“行代表时间、列代表日期”的结构，即周一至周五为列、各时段为行，避免合并单元格；手机端需用table-wrapper包裹并设overflow-x:auto，配合min-width和换行控制；完成任务通过CSS类或复选框标记；导出Excel须用标准HTML结构或SheetJS库确保格式准确。
表格结构怎么安排才方便填计划
周工作计划表本质是“行代表时间、列代表任务”的二维映射，不是随便画格子。周一到周五作为<tr>行更合理——因为每天要填的内容（早/中/晚/备注）天然成列；如果反过来把日期当列，后期加人或加任务时要反复改<th>，维护成本高。
- 用
<thead>固定第一行：包含“时间”“周一”“周二”…“周五”“备注” - 每个时段（如“09:00–10:30”）占一行
<tr>，对应6个<td>（含时间列和备注列） - 避免合并单元格（
rowspan/colspan），一旦某天有临时会议要跨时段，会破坏整行对齐，后续调整极易错位
怎么让表格在手机上不横向滚动
默认<table>在小屏上溢出是常态，但加overflow-x: auto只是掩盖问题，实际体验差。真正有效的做法是：
- 给
<table>加display: block，再套一层<div class="table-wrapper">并设overflow-x: auto - 所有
<td>和<th>设min-width: 80px，防止文字挤成一团 - 时间列（第一列）用
white-space: nowrap保格式，其他列允许换行：word-break: break-word - 别用
table-layout: fixed配width: 100%，那样内容会被强行截断，尤其备注栏容易丢字
如何快速标记已完成任务
靠手改颜色太慢，用CSS类名+简单JS更可靠：
- 定义
.done类：text-decoration: line-through; opacity: 0.7; - 点击单元格时切换：
cell.addEventListener('click', () => cell.classList.toggle('done')) - 注意别绑定在
<table>上做事件委托——万一误点空白处触发，会把整个<tr>标灰 - 如果用复选框，每个
<td>里放<input type="checkbox">，勾选后用:checked + span控制文字样式，比JS更轻量
导出为Excel时内容错乱怎么办
浏览器直接另存为HTML再用Excel打开，常出现日期变数字、空格变制表符、中文乱码。根本原因是Excel对HTML解析规则老旧：
立即学习“前端免费学习笔记（深入）”；
- 表格必须用标准
<table><thead><tbody>结构，不能缺任何一层 - 所有
<td>内容用<div>包裹，避免换行符被Excel当分隔符 - 中文标题加
charset=utf-8声明，且文件保存时编码选UTF-8 with BOM（否则Excel默认用ANSI读） - 更稳妥的做法：用
SheetJS库生成.xlsx，而不是依赖HTML导出——const wb = XLSX.utils.table_to_book(document.querySelector('table'))一行搞定
实际用的时候，时间粒度越细（比如15分钟一格），表格越容易撑爆屏幕；但太粗（半天一格）又没法跟踪进度。折中选30–45分钟一格，配合.done点击标记，基本够用。
