要实现表格仅顶部和底部有粗边框，必须先设table{border-collapse:collapse}，再给thead加border-bottom、tfoot加border-top、table加border-top/border-bottom，同时清空th/td的border以避免内部干扰。

用 border-collapse: collapse 控制边框合并

默认表格边框是分离的（border-collapse: separate），每格都有独立边框，想只让顶部和底部有粗线，必须先合并边框，否则上下边框会和内部横线重叠或错位。

关键一步是给 <table> 设置：<pre class="brush:php;toolbar:false;">border-collapse: collapse;</pre>，否则后续的 <code>border-top/border-bottom 很可能不生效或显示异常。

给 <thead> 和 <code><tfoot> 单独加粗边框 <p>表格结构里，只有 <code><thead> 的底边、<code><tfoot> 的顶边，以及整个 <code><table> 的顶/底边能稳定对应“顶部粗线”和“底部粗线”。直接给 <code><tr> 加 <code>border-top 容易被相邻行覆盖，不可靠。

• 给 <thead> 设置 <code>border-bottom: 3px solid #000
• 给 <tfoot> 设置 <code>border-top: 3px solid #000
• 再给 <table> 加 <code>border-top: 3px solid #000 和 border-bottom: 3px solid #000 —— 这样确保即使没有 <thead> 或 <code><tfoot>，顶部/底部仍有粗线 <h3>避免内部边框干扰</h3> <p>如果用了 <code>border-collapse: collapse，所有单元格的 border 都会参与合并，容易让中间出现不该有的粗线。解决方法是显式清空内部：
  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 给 <th> 和 <code><td> 设置 <code>border: none 或 border: 0
  • 不要依赖 border-spacing: 0（它只对 separate 有效）
  • 如果需要内部分隔线，改用 border-bottom: 1px solid #ddd 仅加在 <tr> 上（除最后一行），而不是全表设边框 <h3>兼容性与常见失效原因</h3> <p>IE8+ 和所有现代浏览器都支持上述写法，但容易踩坑的地方很具体：</p> <ul><li><code><thead> 必须存在且位置正确（必须在 <code><tbody> 前），否则 <code>border-bottom 不渲染
  • 如果用了 CSS 框架（如 Bootstrap），它的表格样式可能覆盖你的 border-collapse，需加 !important 或提高选择器权重
  • 移动端 Safari 对 <tfoot> 渲染不稳定，保险起见，底部粗线优先靠 <code><table> 的 <code>border-bottom 实现，<tfoot> 的 <code>border-top 当作增强项

    真正起作用的是组合：collapse + 表头/表尾边界控制 + 内部边框归零。少一个环节，粗线就容易出现在不该出现的地方。

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