答案是必须用css为table单独设置border并配合border-collapse: collapse和td/th的border: none，才能实现仅外边框效果。html的border属性会作用于所有单元格导致网格线，而css方式通过合并边框、清除单元格边框、仅给table设边框，精准控制外框显示。
直接用 border 属性加外边框，但默认只显示单元格边框
HTML 表格的 border 属性（如 <table border="1">）确实能快速画出线条，但它作用在每个 <code><td> 和 <code><th> 上，结果是「所有单元格都有边框」，看起来像网格线，不是你想要的「仅最外一圈」的外边框。这时候表格内部也全是线，视觉上反而更乱。<p>真正要的只是包裹整个表格的单层边框，得靠 CSS 控制：</p>
<ul>
<li>
<code>border-collapse: collapse 先让单元格边框合并，避免双线重叠干扰外框判断
<table> 单独设 <code>border: 2px solid #333，它就只画在外围<td> 或 <code><th> 设 <code>border，否则又冒出内线CSS 中用 border 给 <table> 加外边框的写法<p>这是最干净、可控的方式。注意两点：一是必须显式清除单元格边框，二是避免被 <code>border-collapse: separate（默认值）干扰。
示例代码：
<style>
table {
border: 2px solid #007bff;
border-collapse: collapse;
}
td, th {
border: none; /* 关键！否则单元格自带边框会透出来 */
padding: 8px;
}
</style>
| 姓名 | 城市 |
|---|---|
| 张三 | 北京 |
如果漏掉 border: none，哪怕只有一行 <tr>，<code><td> 的默认边框（部分浏览器有）或继承样式仍可能让内线残留。<h3>为什么不用 <code>border="1" 属性？它和 CSS 冲突吗？
会冲突，而且不可靠。border 是 HTML 旧属性，浏览器对它的解析不统一：有些当“所有单元格边框宽度”，有些当“表格外边框粗细”，但都不保证只画外圈。更麻烦的是，一旦你写了 CSS 的 border，HTML 的 border 属性会被忽略 —— 但开发者常误以为两者叠加，结果调试半天发现没生效。
实际场景中建议：
- 完全弃用
border="X"，改用 CSS 控制 - 若维护老项目不得不保留，务必检查是否同时存在
table { border: ... }，优先级高的 CSS 会覆盖它 - 用浏览器 DevTools 查看 computed styles，确认最终生效的是哪条规则
想加圆角外边框？border-radius 要配合 overflow: hidden
单纯写 border-radius: 6px 在 <table> 上，往往无效 —— 因为单元格内容（尤其是文字）可能溢出，把圆角“撑平”。必须加一层保护：<ul><li>给 <code><table> 同时设 <code>border-radius 和 overflow: hidden
border-collapse: collapse 已启用，否则圆角会被分离的单元格边框破坏<td> 设 <code>padding 过大，否则圆角区域留白难控制典型失效场景：表格里有图片或长文本未换行，overflow: hidden 会裁剪内容，得同步处理内容溢出逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
