CSS表格边框避免重叠的问题

Seven_2003

已于 2022-04-03 18:05:25 修改

阅读量2.4k

点赞数

于 2022-04-03 18:03:44 首次发布

本文链接：https://blog.csdn.net/Seven_2003/article/details/123941371

版权

可以直接利用单元格之间的间距（border-spacing）设置table与td、tr的背景色，来达到视觉上边框的效果。

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #employeeTable {
      border-spacing: 1px;
      background-color: black;
      margin: 80px auto 10px auto;
    }
    td,th{
      background-color: white;
    }
  </style>
</head>
<body>
  <table id="employeeTable">
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Salary</th>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <td>Tom</td>
      <td>tom@tom.com</td>
      <td>5000</td>
      <td><a href="#">Delete</a></td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Bob@Bob.com</td>
      <td>15000</td>
      <td><a href="#">Delete</a></td>
    </tr>
  </table>
</body>
</html>

此方法可避免单独为th、td设置边框时，边框重叠导致边框变宽的问题。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Seven_2003

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS表格边框避免重叠的问题

可以直接利用单元格之间的间距（border-spacing）设置table与td、tr的背景色，来达到视觉上边框的效果。代码如下：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <style> #employeeTable { border-spacing:
复制链接

扫一扫