html设置table border,用css来设置table的border
在網頁中table是一種很好的展示數據的標簽。默認情況下，table是沒有border的，但是我們為了好看，經常要給table加上border。而且IE7/8/9下border的顏色還不一樣，下面我們就來看看如何用css來控制table的border的顯示。
首先，我們創建一個簡單的table，代碼如下：
first row
first row
second row
second row
初始樣式很簡單：
.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;
}
總結
以上是生活随笔為你收集整理的html设置table border,用css来设置table的border的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我的世界怎么改名字
- 下一篇： css html基础书,htmlcss基