在網頁中table是一種很好的展示數據的標籤。默認情況下,table是沒有border的,但是我們爲了好看,經常要給table加上border。而且IE7/8/9下border的顏色還不一樣,下面我們就來看看如何用css來控制table的border的顯示。
首先,我們創建一個簡單的table,代碼如下:
<table class="my-table">
<tr>
<td>first row</td>
<td>first row</td>
</tr>
<tr>
<td>second row</td>
<td>second row</td>
</tr>
</table>
初始樣式很簡單:
.my-table {
border: 1px solid #ccc;
}
這時候,table在各個瀏覽器下面表現幾乎一致,我選取了chrome下的截圖
這時候,如果我們需要每行都加上border呢,應該怎麼做?聰明的你,應該想到了tr標籤吧,沒錯,我們來試試看,改寫css如下:
.my-table {
border: 1px solid #ccc;
}
.my-table tr {
border: 1px solid blue;
}
然後刷新下頁面,很遺憾,什麼都沒有發生。說明,在tr上面寫border是沒有作用的。那麼,我們再試試td標籤吧,說不定會有驚喜哦,改寫css如下:
.my-table {
border: 1px solid #ccc;
}
.my-table td {
border: 1px solid blue;
}
這下子我們能看到新的變化咯,各瀏覽器表現基本一致,但美中不足的是,td的border之間有空格:
爲了美觀,我們還得去掉單元格之間的空白,使用border-collapase:collapase,改寫css如下:
.my-table {
border: 1px solid #ccc;
border-collapse: collapse;
}
.my-table td {
border: 1px solid blue;
}
看看現在的table是什麼個樣子,不同瀏覽器下表現不一樣咯。我們從下圖可以看到,在chrome和FF下面,td的邊框會取代table外面的邊框,而IE下面table的外框沒有變化,下次用點豔麗的顏色來標識更明顯。
那麼,怎樣才能達到一致呢?我發現,如果將table的外邊框的寬度增大就可以;嚴格說來,應該遵循這麼一個規則,外邊框的寬度和td的寬度比較,哪個寬則顯示該邊框。
例如我分別設置table和td的border寬度爲2px和1px,然後再設置一個5px和4px來對比看看(注意,我已經把顏色換得更醒目咯):
其實,通過實驗我們發現,這個時候各個瀏覽器下面,table的表現是一致的。平時在寫css的時候,使用上面的代碼,就能保證大部分瀏覽器的兼容性啦,包括IE6。
update:20121108
其實在tr上寫border是有樣式的,只不過與在td上寫border的樣式相同。如果想單獨針對一行寫border,那麼你可以使用如下的方式:
.my-table td {
border-bottom:1px solid blue;
}
最終的樣式如下: