在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