border-top 直接加在 <table> 上常失效，因其默认 border-collapse: separate 导致边框被单元格遮挡；应优先加在 <thead> 或 <tr> 的 border-bottom、<th>/<td> 的 border-top（需配合 border-collapse: collapse），或 <table> 自身（需设 collapse 且无 cellspacing 干扰）。
border-top 能加顶部线，但直接套在 <table> 上往往没效果——因为表格默认边框模型是 separate，border-top 会被内部单元格的边框“盖住”或“抵消”。关键不是能不能用，而是用在哪、怎么配。
为什么 border-top 加在 <table> 上常失效
表格元素默认有 border-collapse: separate，此时 <table> 的 border-top 和第一行 <tr> 或 <th> 的上边框会各自渲染，视觉上可能重叠、错位甚至完全不可见。更常见的是：你写了 border-top: 2px solid #333，刷新后啥也没变。
- 检查 computed styles，大概率发现
border-top确实存在，但被th/td的border遮挡或间距撑开 -
<table>自身不参与内容流边框绘制，它的边框只作用于外框，而顶部区分线通常要“压在表头下方” - 老式写法
<table border="1">会强制覆盖 CSS，导致border-top被忽略
真正起效的三个位置：优先级从高到低
想让顶部区分线清晰、可控、不打架，就别硬刚 <table>，把 border-top 挂在下面三处之一：
-
<thead>或<tr>（推荐）：给表头行加border-bottom，视觉上就是“顶部区分线”，且天然对齐所有列thead tr { border-bottom: 2px solid #e0e0e0; } -
<th>或<td>：对第一行单元格统一设border-top，注意必须配合border-collapse: collapse，否则每列线会断开thead th { border-top: 1px solid #999; } -
<table>+border-collapse: collapse：仅当你要的是“整个表格最顶上一条线”时才用，且需确保无cellspacing干扰table { border-collapse: collapse; border-top: 3px double #666; }
border-top 在表格里生效的硬性前提
漏掉任意一条，border-top 都可能静默失败：
立即学习“前端免费学习笔记（深入）”；
- 必须有明确的
border-style（哪怕只写solid），border-top: 1px #000无效，border-top: 1px solid #000才行 - 若用在
<th>/<td>上，border-collapse: collapse必须设在<table>上，否则边框不合并，线会错位或双倍粗 - 避免同时设置
border简写属性（如border: 1px solid #ccc）和单独的border-top，后者会被前者覆盖（除非用!important，不推荐） - 如果表格嵌在其他容器中，检查父级是否有
overflow: hidden或负 margin，可能裁掉顶部像素
最常被忽略的点：区分线不是“画在哪儿”，而是“分隔哪两块内容”。border-top 加在 <th> 上，分隔的是表头和数据；加在 <thead> 上，分隔的是表头区域和表格主体。选错位置，再细的线也起不到区分作用。
