2015年12月15日 星期二

[筆記] 針對表格使用邊框圓角(table with border-radius)


最近在製作表格的時候,想要搭配上邊框弧形(border-radius)的屬性,結果一直做不出想要的樣子,邊框一直跑出背景色,像是這樣子:


原本的CSS程式碼長這樣:
table{
  border-collapse: collapse;
}
tr{
  border: 1px solid #E0607E;
}
td{
  border: 1px solid #607ee0;
  padding: 10px 30px;
  background-color: #E0607E;
  border-radius: 10px;
  color: #FFF;
}
這裡我們發現兩個問題

1. 我們針對<tr>去下border-radius的指令,可是這樣的效果,卻只對背景色有效果,對旁邊的邊框卻沒有效果,變得邊框外面又多一層變框的樣子。


2. 我們只想要針對第一列和最後一列進行邊框圓角的效果,但是現在是針對所有列都執行了邊框圓角的效果。


讓我們來看看怎麼解決這樣的問題吧!

解決邊框沒有圓角的現象

首先,針對第一個問題的的解決辦法很簡單,之所以我們的border-radius屬性沒辦法對邊框產生圓角的效果,是因為我們在最上方table的地方,給了一個border-collapse: collapse,也就是因為這樣的關係,使得我們的border不聽操控。

因此,第一步我們先把border-collapse改回預設值separate

這麼一改之後,就可以看到表格的邊框可以服貼住我們的邊角了!


但這時候表格和表格之間卻出現了空隙,為了再一併改變這樣的情形,我們要再針對表格添加一個屬性border-spacing,並把它設為0。


如此一來,表格和表格之間就不會有空隙了!

table{
  border-collapse: separate;
  border-spacing: 0;
}

只要讓第一欄和最後一欄有圓角

如果想要只讓第一欄和最後一欄有圓角,我們可以善用CSS的選擇器,分別選擇:first-child:last-child

在這裡,我們就是要選擇第一個<td>和最後一個<td>去指定圓角的效果就好,所以我們會分別加上這兩段:
td:first-child{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
就可以得到我們想要的樣子了!


如果表格有多欄多列該怎麼處裡

如果表格不只有一列,其實處理的方法一樣,只要善用剛剛提到的:first-child:last-child就可以了,結果如下!
See the Pen table with border-radius by PJCHEN (@PJCHENder) on CodePen.

Share:

0 意見:

張貼留言