已经对border默认属性的3维效果感到厌倦了么?我也是.一般来说,为table标签加上border="1"就会与图3-1的效果类似,当然你也能换个方法,这边有一个用css做出漂亮整洁边框的诀窍.首先,我们给每个<th><td>单元格两侧(右侧和底部)加上一像素的边框:

th, td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }

只加上两侧边框,是建立各处边框等宽又同时让大部分流行的浏览器能够正确显示的关键所在.如果我在四周都加上边框,那么边框的顶部和左侧会在单元格排列时造成重叠,在稍后的示例中,我会给出一种只用一条border规则就达成小童效果的方法.

你会发现图3-2中的整个表格只缺少了最顶部和最左侧的边线,为了补齐边框,我们给<table>元素加上样式相同的border-top和border-left属性

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
th, td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }

图3-2:为th和td加上两侧边线的表格示例

图3-3 补齐边线后的表格示例

去掉间隙

现在我们已经有了个完整的表格了,但是边框之间的间隔是怎么回事?不幸的是,由于大多数浏览器会默认设置一点外补丁,因此就会露出这些令人讨厌的间隙了.

我们能做的是为表格元素加上border-collapse属性来去掉这些间隙,得到我们想要的样式.

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-collapse: collapse;
  }
th, td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }

在为border-collapse加上collapse属性后,我们就能看到精确的单线边框样式了,如图3-4

图3-4:使用了border-collapse属性后的表格示例

备注：

CSS属性 border-collapse 边框合并属性

转自：蓝色理想