HTML表格如何删除边框_HTML表格边框隐藏方法

在网页开发中，我们经常会用到HTML表格来展示结构化数据。不过默认的表格样式通常带有明显的边框，很多时候我们需要隐藏这些边框，让表格和页面整体风格更融合。下面我们就来介绍几种常用的HTML表格边框隐藏方法。

方法一：使用HTML的border属性

HTML的<table>标签本身自带border属性，用来设置表格边框的宽度，默认情况下如果不设置该属性，部分浏览器会显示默认边框，我们也可以显式将其设置为0来隐藏边框。

<!-- 设置border为0隐藏表格边框 -->
<table border="0">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>28</td>
    <td>上海</td>
  </tr>
</table>

这种方法的优点是简单直接，不需要额外写CSS代码，但是现在更推荐用CSS来控制样式，将结构和样式分离，所以这种方式更适合简单的临时场景。

方法二：使用CSS的border属性

通过CSS来控制表格边框是更规范的做法，我们可以给<table>标签设置border: none或者border: 0来隐藏边框，同时也可以去掉单元格之间的默认间距。

<style>
  /* 隐藏表格边框，同时去掉单元格间距 */
  .no-border-table {
    border: none;
    border-collapse: collapse; /* 合并相邻单元格边框，避免默认间距 */
  }
  .no-border-table th,
  .no-border-table td {
    border: none; /* 同时隐藏表头和单元格的边框 */
    padding: 8px 12px; /* 可选：设置单元格内边距，让内容更美观 */
  }
</style>

<table class="no-border-table">
  <tr>
    <th>商品名称</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>笔记本电脑</td>
    <td>5999元</td>
    <td>120台</td>
  </tr>
  <tr>
    <td>无线鼠标</td>
    <td>89元</td>
    <td>500个</td>
  </tr>
</table>

这里需要注意，除了给<table>设置无边框，还要给<th>和<td>也设置border: none，因为部分浏览器会给单元格默认添加边框。同时border-collapse: collapse的作用是合并相邻单元格的边框，避免出现默认的单元格间距，让隐藏边框的效果更彻底。

方法三：使用CSS的border-spacing属性

如果不想合并边框，只是想隐藏边框同时调整单元格之间的间距，也可以使用border-spacing属性，不过这种方式需要先把边框设置为透明，再调整间距。

<style>
  .spacing-table {
    border: 1px solid transparent; /* 边框设置为透明 */
    border-spacing: 0; /* 单元格间距设为0 */
  }
  .spacing-table th,
  .spacing-table td {
    border: 1px solid transparent; /* 单元格边框也设为透明 */
    padding: 10px;
  }
</style>

<table class="spacing-table">
  <tr>
    <th>订单号</th>
    <th>下单时间</th>
    <th>订单状态</th>
  </tr>
  <tr>
    <td>20240501001</td>
    <td>2024-05-01 10:23:45</td>
    <td>已发货</td>
  </tr>
  <tr>
    <td>20240501002</td>
    <td>2024-05-01 14:12:33</td>
    <td>待付款</td>
  </tr>
</table>

这种方式适合需要保留单元格独立结构，但是不需要显示边框的场景，透明边框不会占用实际的空间，也不会被用户看到。

不同方法的适用场景

在实际开发中，更推荐使用方法二，也就是通过CSS设置border: none配合border-collapse: collapse的方式，既符合前端开发的最佳实践，也能保证不同浏览器下的效果一致。

HTML表格隐藏边框CSS样式border-collapse前端开发 本作品最后修改时间：2026-05-22 13:20:15