排课表冲突提醒失效的根源在于html表格结构错误而非css样式问题，核心是rowspan/colspan误用导致dom异常、data-conflict服务端标记缺失、移动端table布局溢出及tooltip定位坐标不准，需全链路保障语义一致性。
rowspan 和 colspan 用错，是排课表视觉冲突提醒失效的最常见原因——不是样式没加，而是表格结构已错，CSS根本找不到目标单元格。
为什么加了 background-color 却没变红？
排课表里“同一时段两门课撞在同一格”本该高亮提醒，但实际没反应。这不是 CSS 写错了，而是 rowspan/colspan 导致 DOM 结构异常，让选择器匹配失败。
- 浏览器解析时，若某
<td rowspan="2"> 后面紧跟着同一列的另一个 <code><td>，它会自动补空行或忽略后一个 <code><td>，导致实际渲染的 DOM 节点数与预期不符<li>你写的 <code>td.conflict选择器可能匹配到了被浏览器“吞掉”的那个<td>，而真正显示内容的单元格根本没有 class 属性<li>调试方法：打开开发者工具，右键检查目标单元格 → 查看其父 <code><tr> 下的子元素数量；再对比该行应有列数（比如 8 列），若数量对不上，基本就是合并漏删单元格<h3>如何用 data-* 属性触发冲突检测逻辑？</h3> <p>靠人工肉眼找“两门课写进同一个 <code><td>”不现实，得让 HTML 自带冲突线索。关键不是渲染，而是让 JS 能可靠识别“这里不该有两门课”。<ul><li>每门课的 <code><td> 必须带 <code>data-course-id和data-time-slot（如"mon-3-4"表示周一第 3–4 节） - 服务端生成 HTML 时，对同一
data-time-slot值出现多次的位置，额外加data-conflict="true"—— 不要等 JS 遍历比对，直接由后端标记 - 前端只需监听
document.querySelector('td[data-conflict="true"]')，然后统一加class="conflict-highlight"，避免运行时遍历所有<td> <li>注意：<code>data-conflict不能仅靠 JS 在页面加载后计算，否则 SSR 或静态导出场景下会丢失 -
table元素强制按列宽撑开，小屏下无法折行，colspan合并反而加剧横向溢出，导致部分单元格被截断或重叠，data-conflict对应的 DOM 可能根本不可见 - 不要给
td.conflict-highlight加!important强行覆盖，这解决不了渲染错位；优先考虑降级方案：小屏下改用display: block+flex-direction: column重构单日课表视图 - 如果必须保留 table，至少为冲突单元格加
min-width: 120px并配合white-space: normal，防止文字撑爆单元格后破坏rowspan区域边界 - 别用
event.clientX / event.clientY直接定位 tooltip，table在缩放或滚动时坐标计算误差大；应基于element.getBoundingClientRect()获取单元格真实视口位置 - 冲突单元格常含
rowspan="2"，其getBoundingClientRect()返回的是整个合并区域的矩形，但 tooltip 若锚定在左上角，会偏离实际内容所在子区域 - 更稳妥做法：在服务端就把冲突详情注入
data-tooltip-content，JS 创建 tooltip 时用position: absolute+top/left显式设在单元格中心（rect.left + rect.width / 2 - tooltipWidth / 2） - 别忘了加
pointer-events: none到 tooltip 内部，否则遮挡下方单元格的 click 事件
移动端小屏下冲突提醒失效的根本原因
桌面端明明高亮的冲突单元格，手机上变成一整行挤在一起、颜色全糊了——问题不在 CSS 媒体查询，而在 table 的固有布局机制。
为什么 tooltip 提醒在排课表里容易失效？
鼠标悬停显示“张三/李四同时占用该时段”，结果 hover 位置偏移、提示框飞走、甚至触发不了——核心是定位依赖了错误的坐标源。
真正难的不是加个红色背景，而是让“冲突”这个语义，在 HTML 结构、服务端标记、客户端渲染、移动端适配四个环节里始终一致。一旦某个环节靠 JS 临时修补，就注定在 SSR、打印、无障碍读屏等场景里掉链子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
