web中细线表格的制作

一、普通表格为什么会出现粗边框？
默认给 table 和 td 同时设置 border 时，单元格边框会双重叠加：

  1. table 有外边框，每个 td 又自带内边框；
  2. 相邻两个单元格各有1px边框，叠加后视觉变成 2px 粗线；
  3. 单纯设置 border-collapse: collapse; 可以合并边框，但部分场景线条发灰、粗细不均；
  4. 主流两种细线实现方案：边框合并法（简洁）、内边距遮罩细线法（纯1px均匀细线），下面两种都讲解。
    间隙遮罩超细表格（更细腻、UI常用）

实现原理

  1. 给 table 设置 border-spacing:0、背景色（细线颜色）；
  2. th/td 设置白色背景，上下左右留白1px；
  3. 单元格之间露出table背景，形成视觉1px细线，线条更柔和细腻，适合后台管理系统。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>合并边框细线表格</title>
  <style>
    table {
      /* 核心：合并单元格边框，消除双线 */
      border-collapse: collapse;
      width: 80%;
      margin: 30px auto;
      font-size: 14px;
    }
    th, td {
      /* 统一1px灰色细线 */
      border: 1px solid #ccc;
      padding: 10px 15px;
      text-align: center;
    }
    th {
      background-color: #f5f7fa;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>22</td>
      <td>济南</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>24</td>
      <td>烟台</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>

      <td>21</td>
      <td>青岛</td>
    </tr>
  </table>
</body>
</html>


![联想截图_20260709085120](https://img2024.cnblogs.com/blog/3774919/202607/3774919-20260709085153029-1360303373.png)
posted @ 2026-07-09 08:54  寐式  阅读(9)  评论(0)    收藏  举报