用css來設定table的border

2022-03-13 02:41:09 字數 1724 閱讀 8384

在網頁中table是一種很好的展示資料的標籤。預設情況下,table是沒有border的,但是我們為了好看,經常要給table加上border。而且ie7/8/9下border的顏色還不一樣,下面我們就來看看如何用css來控制table的border的顯示。

首先,我們建立乙個簡單的table,**如下:

first row

first row

second row

second row

初始樣式很簡單:

.my-table
這時候,table在各個瀏覽器下面表現幾乎一致,我選取了chrome下的截圖

這時候,如果我們需要每行都加上border呢,應該怎麼做?聰明的你,應該想到了tr標籤吧,沒錯,我們來試試看,改寫css如下:

.my-table 

.my-table tr

然後重新整理下頁面,很遺憾,什麼都沒有發生。說明,在tr上面寫border是沒有作用的。那麼,我們再試試td標籤吧,說不定會有驚喜哦,改寫css如下:

.my-table 

.my-table td

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

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

.my-table 

.my-table td

看看現在的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
最終的樣式如下:

用css來設定table的border,考慮相容性

在網頁中table是一種很好的展示資料的標籤。預設情況下,table是沒有border的,但是我們為了好看,經常要給table加上border。而且ie7 8 9下border的顏色還不一樣,下面我們就來看看如何用css來控制table的border的顯示。首先,我們建立乙個簡單的table,如下 ...

用div來代替table

table是我們日常開發中經常用到的html標籤,但我們也經常因為table飽受折磨,原生的table的樣式醜出天際,第三方框架的樣式可能樣式是好看點了,但可能並不是我們想要的樣子。面對這些情況,我覺得自己用div寫去乙個table是乙個很好的方法,樣式全部可按照自己想要的樣子調整。首先貼出全部 b...

用CSS設定Table的細邊框的幾種方法

大家經常會發現table的border設定為1,得到的邊框卻不是想要的1個畫素的細邊框,於是很多人去想方設法做出細邊框的效果。設定table的細邊框通常有這麼幾種方式 1 設定邊框的border 0 cellspacing 1,設定table的背景色為所要的邊框色,再設定所有的td背景色為白色,這樣...