如何移除 HTML 表格的边框

要移除 HTML 表格中可见的边框，请在显示线条的表格和单元格上将 CSS border 属性设为 none。如果希望相邻单元格的边框合并为一条线，则使用 border-collapse: collapse；这个属性会合并边框，而不是移除边框。在单元格中排列图像或其他内容时，了解这一区别很有用：collapse 会改变相邻边框的交接方式，而 border: none 会移除所选元素渲染出的边框。

使用 border-collapse: collapse 合并 HTML 表格中相邻单元格的边框

CSS 的 border-collapse 属性用于控制表格采用分离边框模型还是合并边框模型。取值为 collapse 时，相邻单元格的边框会合并，因此两个单元格不会在共用边缘各自绘制一条线。表格外侧和单元格周围原有的边框仍可能可见；这条声明不会将它们移除。它也不能用来把间距设为零。在分离边框模型中，单元格边框之间的间隔由 border-spacing 控制；而合并边框模型会合并相邻边框，因此在这种模型下，调整 border-spacing 不能解决可见线条问题。

下面这个简短的 HTML 示例创建了两个带边框的单元格。表格规则会合并两个单元格交界处的线条，而单元格规则会保留可见边线：

const example = `<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>`;
console.log(example);

<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>

将示例单元格中的文字换成自己的内容；如果单元格用于放置图像，也可以在其中加入图像元素。这些 CSS 规则适用于普通的 <td> 和 <th> 单元格，不依赖图像服务。padding 声明会增加单元格内部的留白，但不会控制彼此分开的单元格边框之间的间隔。如果你想要带共用线条的网格，请保留单元格边框并使用合并模型。如果不想显示线条，请按下文所述移除适用元素上的边框声明。

将 CSS border 属性设为 none 以移除 HTML 表格的边框

要隐藏边框，请在表格以及所有需要隐藏边框的单元格类型上设置 border: none。使用 table, th, td 的规则会同时匹配表格、表头单元格和数据单元格。如果表格外框已经不存在，只有单元格之间仍有线条，则可只用 th, td 匹配这些单元格。选择器决定哪些元素会应用这条声明；CSS 级联则决定多个匹配声明中哪一条生效。更具体的规则可以覆盖通用选择器；如果特异性相同，则后出现的声明生效。

border 属性是 border-width、border-style 和 border-color 的简写形式。将它设为 none 会移除所选元素渲染出的边框，但不会移除单元格内边距或内容。例如，如果这三类元素都不应显示边框，可以在样式表中使用 table, th, td { border: none; }。只有在还希望表格采用合并边框模型时，才添加 border-collapse: collapse；它不能代替 border: none。

如果仍有线条显示，请检查实际绘制线条的是哪个元素。表格上的边框需要由匹配表格的规则处理；表头或数据单元格上的边框则需要由匹配 th 或 td 的规则处理。接着检查是否有其他样式表规则覆盖了你的声明。这样可以只修正实际带有边框的元素，避免意外改变无关的表格间距或内容。