最有效方法是直接为 th 设置深色 background-color，如 #2c3e50；需避免仅设 thead 或使用浅色名，同时配合深色边框、白色文字、足够 padding 和 font-weight 提升厚重感。
直接给 th 设置 background-color 最有效
表头背景颜色变深，本质是覆盖默认（或继承）的浅色背景。浏览器对 th 没有统一深色默认值，多数情况下它只是透明或继承父级颜色。所以必须显式设置：th { background-color: #2c3e50; } 这类深色值才能生效。
注意两点：
- 别只写
thead { background-color: ... }—— 它不直接渲染背景，只是“传递”给子元素；如果th自己没设背景，最终可能还是透出父级或 body 颜色 - 避免用太亮的颜色名如
darkgray，它实际是中性灰（#a9a9a9），不够深；优先用十六进制如#1a232e或rgb(26, 35, 46)
thead tr 和 th 的样式优先级要理清
如果你同时写了 thead tr { background-color: #34495e; } 和 th { background-color: #2c3e50; }，后者会胜出——因为 th 是更具体的元素，且它的背景直接绘制在单元格上。
常见误操作：
- 只设
thead tr背景，但没关掉td的默认边框或内边距干扰，视觉上显得“不深” - 在
th上加了border-bottom却用了浅色边框，削弱了整体深色感；建议配深色边框：border-bottom: 2px solid #1a232e; - 忘了重置文字颜色，深背景+深文字（如默认黑色）导致看不清；务必加
color: white;或color: #ecf0f1;
深色表头在 border-collapse: collapse 下容易露白边
当表格启用 border-collapse: collapse; 时，th 的背景色不会延伸到边框区域。如果边框是浅色（比如 border: 1px solid #bdc3c7;），就会在深色表头周围形成“白边”或“灰边”，破坏深色效果。
解决办法很直接：
- 把边框也设成深色：
border: 1px solid #2c3e50; - 或者干脆去掉边框，靠 padding 和阴影营造层次：
box-shadow: 0 1px 2px rgba(0,0,0,0.1); - 检查是否意外设置了
th::before或其他伪元素，它们可能叠加浅色层
动态表格里用 class 比硬写颜色值更可控
如果表格内容会由 JS 动态插入、排序或筛选，靠内联 style 或固定选择器（如 th:first-child）设深色，很容易失效——新插入的 th 不带样式，或者列顺序变了导致错位。
推荐做法：
- 统一加 class：
<th class="table-header">Name</th> - CSS 写死：
.table-header { background-color: #2c3e50; color: #fff; font-weight: 600; } - 需要多套主题？用 data 属性驱动：
<table data-theme="dark">...，再写 <code>table[data-theme="dark"] th { ... }真正容易被忽略的是：深色背景下，
th的padding和字体粗细对“厚重感”影响比颜色值本身还大。加 2px padding、用font-weight: 600，比把#2c3e50换成#1a232e更明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
