表格Table的Th Td標(biāo)簽在設(shè)置背景顏色后，設(shè)置的邊框消失了，出現(xiàn)此情況主要是因?yàn)?【background】屬性 與 【position:relative;】同時(shí)使用的緣故。

解決方法：對Th Td 標(biāo)簽增加【background-clip:padding-box;】樣式屬性即可解決，具體整理如下：

body{font-family:'宋體',Arial,sans-serif;font-size:12px;color:#666;padding:24px;}

p{margin:24px 0 6px 2px;}

.TestTable1{width:200px;border-collapse:collapse;border:2px solid #678;}

.TestTable1 th, .TestTable1 td{height:32px;width:100px;text-align:center;border:1px solid #e66;background:#ded;}

.TestTable1 th, .TestTable1 td{position:relative;}

表格1：同時(shí)設(shè)置【background】與【position:relative;】樣式，框線不顯示。

標(biāo)題1標(biāo)題2標(biāo)題3

內(nèi)容1	內(nèi)容2	內(nèi)容3

.TestTable2{width:200px;border-collapse:collapse;border:2px solid #678;}

.TestTable2 th, .TestTable2 td{height:32px;width:100px;text-align:center;border:1px solid #e66;}

.TestTable2 th, .TestTable2 td{position:relative;}

表格2：只設(shè)置【position:relative;】樣式，框線正常顯示。

標(biāo)題1標(biāo)題2標(biāo)題3

內(nèi)容1	內(nèi)容2	內(nèi)容3

.TestTable3{width:200px;border-collapse:collapse;border:2px solid #678;}

.TestTable3 th, .TestTable3 td{height:32px;width:100px;text-align:center;border:1px solid #e66;background:#ded;}

表格3：只設(shè)置【background】樣式，框線正常顯示。

標(biāo)題1標(biāo)題2標(biāo)題3

內(nèi)容1	內(nèi)容2	內(nèi)容3

.TestTable4{width:200px;border-collapse:collapse;border:2px solid #678;}

.TestTable4 th, .TestTable4 td{height:32px;width:100px;text-align:center;border:1px solid #e66;background:#ded;}

.TestTable4 th, .TestTable4 td{position:relative;background-clip:padding-box;}

表格4：同時(shí)設(shè)置【background】、【position:relative;】、【background-clip:padding-box;】樣式，框線正常顯示。

標(biāo)題1標(biāo)題2標(biāo)題3

內(nèi)容1	內(nèi)容2	內(nèi)容3

以上代碼運(yùn)行結(jié)果如下圖所示：

從以上運(yùn)行結(jié)果可以看出，表格4雖然同時(shí)設(shè)置【background】與【position:relative;】樣式屬性，但由于添加了【background-clip:padding-box;】樣式，框線依然能夠正常顯示。

CSS3 background-clip 屬性簡介：

1、瀏覽器支持情況：

IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 屬性。

注釋：Internet Explorer 8 以及更早的版本不支持 background-clip 屬性。

2、background-clip語法：

background-clip: border-box|padding-box|content-box;

值

描述

border-box(默認(rèn)值)

背景被裁剪到邊框盒。

padding-box

背景被裁剪到內(nèi)邊距框。

content-box

背景被裁剪到內(nèi)容框。

總結(jié)

以上是生活随笔為你收集整理的html表格中如何设置thtd的边框颜色,表格Table 的Th Td 标签设置背景颜色后边框消失如何解决？...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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