在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可以實現圓角，但單元格邊框不會合併

後來解決辦法在[這裡](找到，原題最高票答案不適合此需求，因為給出的解決方案是單元格沒有邊框的，並且是給table加上背景色，會導致單元格加上border後顏色也會同table一樣，倒是看看第二票答案，demo：

關鍵在於table標籤內不要寫border=『1』，這個border是給單元格加上邊框，這裡我們單元格是需要邊框，但在html裡的table標籤裡直接寫就會讓每個單元格有邊框，合起來就變粗了，於是通過table tr th,table tr td這樣來給單元格加上想要的邊框，如下：

table tr th,table tr td

控制單邊的邊框生成。

哦啦，問題解決了：

可看demo在此