border-top 直接加在 上常失效，因其默认 border-collapse: separate 导致边框被单元格遮挡；应优先加在 或 的 border-bottom、/ 的 border-top（需配合 border-collapse: collapse），或 自身（需设 collapse 且无 cellspacing 干扰）。

border-top 能加顶部线，但直接套在 <table> 上往往没效果——因为表格默认边框模型是 <code>separate，border-top 会被内部单元格的边框“盖住”或“抵消”。关键不是能不能用，而是用在哪、怎么配。

为什么 border-top 加在 <table> 上常失效 <p>表格元素默认有 <code>border-collapse: separate，此时 <table> 的 <code>border-top 和第一行 <tr> 或 <code><th> 的上边框会各自渲染，视觉上可能重叠、错位甚至完全不可见。更常见的是：你写了 <code>border-top: 2px solid #333，刷新后啥也没变。

• 检查 computed styles，大概率发现 border-top 确实存在，但被 th/td 的 border 遮挡或间距撑开
• <table> 自身不参与内容流边框绘制，它的边框只作用于外框，而顶部区分线通常要“压在表头下方” <li>老式写法 <code><table border="1"> 会强制覆盖 CSS，导致 <code>border-top 被忽略

  真正起效的三个位置：优先级从高到低

  想让顶部区分线清晰、可控、不打架，就别硬刚 <table>，把 <code>border-top 挂在下面三处之一：

  • <thead> 或 <code><tr>（推荐）：给表头行加 <code>border-bottom，视觉上就是“顶部区分线”，且天然对齐所有列
    thead tr { border-bottom: 2px solid #e0e0e0; }
  • <th> 或 <code><td>：对第一行单元格统一设 <code>border-top，注意必须配合 border-collapse: collapse，否则每列线会断开
    thead th { border-top: 1px solid #999; }
  • <table> + <code>border-collapse: collapse：仅当你要的是“整个表格最顶上一条线”时才用，且需确保无 cellspacing 干扰
    table { border-collapse: collapse; border-top: 3px double #666; }

    border-top 在表格里生效的硬性前提

    漏掉任意一条，border-top 都可能静默失败：

    

    HTML Extract

    使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

    下载
    • 必须有明确的 border-style（哪怕只写 solid），border-top: 1px #000 无效，border-top: 1px solid #000 才行
    • 若用在 <th>/<code><td> 上，<code>border-collapse: collapse 必须设在 <table> 上，否则边框不合并，线会错位或双倍粗 <li>避免同时设置 <code>border 简写属性（如 border: 1px solid #ccc）和单独的 border-top，后者会被前者覆盖（除非用 !important，不推荐）
    • 如果表格嵌在其他容器中，检查父级是否有 overflow: hidden 或负 margin，可能裁掉顶部像素

    最常被忽略的点：区分线不是“画在哪儿”，而是“分隔哪两块内容”。border-top 加在 <th> 上，分隔的是表头和数据；加在 <code><thead> 上，分隔的是表头区域和表格主体。选错位置，再细的线也起不到区分作用。</thead>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！