HTML表格样式生效的前提是<link rel="stylesheet" href="...">必须置于<head>内且属性完整、路径正确、选择器匹配；否则浏览器不构建CSSOM，样式静默失效。
HTML 编辑器本身不负责“关联”CSS 文件——它只是帮你写代码的工具。真正决定 CSS 是否生效的，是浏览器如何解析 HTML 中的 <link> 标签。绝大多数“关联失败”，其实是 <link> 写错了位置、漏了属性，或路径算错了。
link 标签必须放在 <head> 里，且不能漏 rel="stylesheet"
这是最常被忽略的硬性规则。浏览器只在 <head> 中遇到 rel="stylesheet" 的 <link> 才会启动 CSSOM 构建；放错位置或漏掉 rel，文件照样下载（Network 面板显示 200），但 Styles 面板空空如也，表格/文字全裸奔。
-
<link rel="stylesheet" href="style.css">必须是<head>的直接子元素，紧贴<title>后面最稳妥 -
rel="stylesheet"拼错（比如写成rel="style"）、大小写不对（REL="stylesheet"）、引号不闭合、末尾带空格，都会静默失效——控制台连警告都不报 - 千万别把
<link>塞进<body>或<footer>里，那不是“延迟加载”，是“压根不认”
href 路径怎么写才不会 404？根相对路径最省心
路径不是看你在编辑器里点开的文件夹，而是以当前 HTML 文件的 URL 为基准计算。本地双击打开 file:// 可能侥幸成功，一上 Nginx 就 404。
- 用根相对路径：
href="/css/table.css"（开头/表示网站根目录，不管 HTML 在哪层都有效） - 别用
./css/table.css——./多余，还容易和../搞混 - Linux 服务器严格区分大小写：
Table.css≠table.css，本地开发时就该保持命名一致 - 开发时右键检查源码里的
href值 → “在新标签页中打开”，能直接看到 CSS 内容才算路径通
为什么表格样式总不生效？优先检查选择器和加载顺序
即使 <link> 写对了，表格仍无边框、列宽错乱、响应式失效，大概率是 CSS 规则没命中或被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 确保 CSS 文件里写了针对
<table>、<th>、<td>的选择器，比如table { border-collapse: collapse; }，光写div没用 - 多个
<link>时，后加载的 CSS 会覆盖前面同名规则；如果用了框架（如 Bootstrap），它的默认表格样式可能被你自己的规则覆盖掉 - 移动端列宽异常，大概率是忘了加
@media查询，或table没设width: 100%导致撑破容器 - Vue/Next.js 项目首屏闪动，往往是服务端渲染时 CSS 没注入，或 hydration 时样式不匹配
真正卡住人的从来不是“怎么写 link”，而是“为什么写了却没效果”。重点盯住 <head> 里那一行 <link rel="stylesheet" href="...">：位置对不对、属性全不全、路径通不通、选择器准不准——这四点串起来，90% 的样式关联问题就解了。
