溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

CSS中怎么實(shí)現(xiàn)表格細(xì)邊框

發(fā)布時(shí)間：2021-07-09 16:45:01 來(lái)源：億速云 閱讀：262 作者：Leah 欄目：web開(kāi)發(fā)

本篇文章給大家分享的是有關(guān)CSS中怎么實(shí)現(xiàn)表格細(xì)邊框，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>表格細(xì)邊框的兩種CSS實(shí)現(xiàn)方法</title> 
<style type="text/css"> 
/* 利用表格樣式 border-collapse: collapse 實(shí)現(xiàn)細(xì)邊框 */ 
.tab1 
{ 
width: 300px; 
height: 200px; 
border: 1px solid #ccc; 
border-collapse: collapse; 
} 
.tab1 td, .tab1 th 
{ 
border: 1px solid #ccc; 
padding: 5px; 
} 
/* 利用表格樣式 border-spacing:0px; 和表格與單元格背景色的不同來(lái)實(shí)現(xiàn)細(xì)邊框。 
IE7及更早瀏覽器不支持border-spacing屬性，可以通過(guò)table的標(biāo)簽屬性cellspacing來(lái)替代。*/ 
.tab2 
{ 
width: 300px; 
height: 200px; 
background-color: #ccc; 
border-spacing: 1px; 
} 
.tab2 td, .tab2 th 
{ 
background-color: #fff; 
} 
</style> 
</head> 
<body> 
第一種 （通過(guò)XHTML驗(yàn)證） 
<table class="tab1"> 
<thead> 
<tr> 
<th> 
表頭 
</th> 
<th> 
表頭 
</th> 
</tr> 
</thead> 
<tr> 
<td> 
Admin10000.com 
</td> 
<td> 
Admin10000.com 
</td> 
</tr> 
<tr> 
<td> 
Admin10000.com 
</td> 
<td> 
Admin10000.com 
</td> 
</tr> 
</table>

第二種 （通過(guò)XHTML驗(yàn)證） 

<table class="tab2"> 
<thead> 
<tr> 
<th> 
表頭 
</th> 
<th> 
表頭 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 
Admin10000.com 
</td> 
<td> 
Admin10000.com 
</td> 
</tr> 
<tr> 
<td> 
Admin10000.com 
</td> 
<td> 
Admin10000.com 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

以上就是CSS中怎么實(shí)現(xiàn)表格細(xì)邊框，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手