在table中使用border-radius

在table中使用border-radius

先来看看设计图吧：

 

拿到图，先想到仍是表格，table标签，但是，table表格是矩形的，不要紧，咱们有border-radius呀，效果以下：

 

给table加没有效果但能够给每一个单元格加啊，嗯，好像颇有道理的样子，试试：

咦，怎么和想象的不同捏，左右上角的直线角还在呢，而底部的圆角并无效果

后来找到问题是：```CSS3's border-radius property and border-collapse:collapse don't mix.```

如此看来collapse是用不了了，那使用border-collapse: separate呢，以下:

这里声明下border-collapse属性的区别了，w3school是这样说的：

 

因而咱们看到separate的问题就在于表格边框并不合并，这样会使得边框看起来很粗，实在太丑，难保不会被设计狮打死，

因此问题在于，用border-radius造成圆角，能够，可是在table表单中border-collapse:collapse和border-radius不相容，使用border-collapse:separate能够实现圆角，但单元格边框不会合并

后来解决办法在[这里](http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i)找到，原题最高票答案不适合此需求，由于给出的解决方案是单元格没有边框的，而且是给table加上背景色，会致使单元格加上border后颜色也会同table同样，却是看看第二票答案，demo：

关键在于table标签内不要写border=‘1’，这个border是给单元格加上边框，这里咱们单元格是须要边框，但在html里的table标签里直接写就会让每一个单元格有边框，合起来就变粗了，因而经过table tr th,table tr td这样来给单元格加上想要的边框，以下：

table tr th,table tr td {
border-right: 1px solid #d4d8da;
border-bottom: 1px solid #d4d8da;
padding: 5px;
}

 

控制单边的边框生成。

哦啦，问题解决了：

可看demo在此http://codepen.io/puronglong/pen/PPeEML#0