在網(wǎng)頁中table是一種很好的展示數(shù)據(jù)的標(biāo)簽。默認(rèn)情況下，table是沒有border的，但是我們?yōu)榱撕每?#xff0c;經(jīng)常要給table加上border。而且IE7/8/9下border的顏色還不一樣，下面我們就來看看如何用css來控制table的border的顯示。

首先，我們創(chuàng)建一個(gè)簡(jiǎn)單的table，代碼如下：

first row

first row

second row

second row

初始樣式很簡(jiǎn)單：

.my-table {

border: 1px solid #ccc;

}

這時(shí)候，table在各個(gè)瀏覽器下面表現(xiàn)幾乎一致，我選取了chrome下的截圖

這時(shí)候，如果我們需要每行都加上border呢，應(yīng)該怎么做？聰明的你，應(yīng)該想到了tr標(biāo)簽吧，沒錯(cuò)，我們來試試看，改寫css如下：

.my-table {

border: 1px solid #ccc;

}

.my-table tr {

border: 1px solid blue;

}

然后刷新下頁面，很遺憾，什么都沒有發(fā)生。說明，在tr上面寫border是沒有作用的。那么，我們?cè)僭囋噒d標(biāo)簽吧，說不定會(huì)有驚喜哦，改寫css如下：

.my-table {

border: 1px solid #ccc;

}

.my-table td {

border: 1px solid blue;

}

這下子我們能看到新的變化咯，各瀏覽器表現(xiàn)基本一致，但美中不足的是，td的border之間有空格：

為了美觀，我們還得去掉單元格之間的空白，使用border-collapase:collapase，改寫css如下：

.my-table {

border: 1px solid #ccc;

border-collapse: collapse;

}

.my-table td {

border: 1px solid blue;

}

看看現(xiàn)在的table是什么個(gè)樣子，不同瀏覽器下表現(xiàn)不一樣咯。我們從下圖可以看到，在chrome和FF下面，td的邊框會(huì)取代table外面的邊框，而IE下面table的外框沒有變化，下次用點(diǎn)艷麗的顏色來標(biāo)識(shí)更明顯。

那么，怎樣才能達(dá)到一致呢？我發(fā)現(xiàn)，如果將table的外邊框的寬度增大就可以；嚴(yán)格說來，應(yīng)該遵循這么一個(gè)規(guī)則，外邊框的寬度和td的寬度比較，哪個(gè)寬則顯示該邊框。

例如我分別設(shè)置table和td的border寬度為2px和1px，然后再設(shè)置一個(gè)5px和4px來對(duì)比看看(注意，我已經(jīng)把顏色換得更醒目咯)：

其實(shí)，通過實(shí)驗(yàn)我們發(fā)現(xiàn)，這個(gè)時(shí)候各個(gè)瀏覽器下面，table的表現(xiàn)是一致的。平時(shí)在寫css的時(shí)候，使用上面的代碼，就能保證大部分瀏覽器的兼容性啦，包括IE6。

update:20121108

其實(shí)在tr上寫border是有樣式的，只不過與在td上寫border的樣式相同。如果想單獨(dú)針對(duì)一行寫border，那么你可以使用如下的方式：

.my-table td {

border-bottom:1px solid blue;

}

總結(jié)

以上是生活随笔為你收集整理的html设置table border,用css来设置table的border的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。