這篇文章主要為大家展示了“css如何去掉表格重復(fù)的邊框”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css如何去掉表格重復(fù)的邊框”這篇文章吧。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)河北免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

在css中，可以使用border-collapse屬性來去掉表格中重復(fù)的邊框，該屬性可以設(shè)置表格邊框是折疊為單一邊框還是分開的，只需要將值設(shè)置為collapse即可把重疊的邊框合并在一起，成為一個(gè)邊框，實(shí)現(xiàn)單線邊框的效果。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

table表格設(shè)置邊框后的重疊問題

table{
 border-spacing: 0;
 border-collapse: collapse;
}
table td {          
 border: 1px solid #000;
 padding: 20px 30px;
}

在table表格中當(dāng)我們添加了邊框，又把每個(gè)單元格的邊距去除后，表單就會(huì)出現(xiàn)邊框重疊的問題，使得邊框線變粗，這時(shí)我們就可以設(shè)置border-collapse: collapse來設(shè)置邊框，它把重疊的邊框合并在一起，成為一個(gè)邊框，實(shí)現(xiàn)單線邊框的效果。

效果圖：

說明：

border-collapse 屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開顯示。

屬性值：

• separate    默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略 border-spacing 和 empty-cells 屬性。

• collapse    如果可能，邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略 border-spacing 和 empty-cells 屬性。

以上是“css如何去掉表格重復(fù)的邊框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：css如何去掉表格重復(fù)的邊框
當(dāng)前鏈接：http://chinadenli.net/article8/gesiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、定制開發(fā)、網(wǎng)頁設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)