css如何去掉表格重復的邊框

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

專注于為中小企業提供成都網站設計、成都做網站、外貿網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業河北免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了上千家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

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

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

table表格設置邊框后的重疊問題

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

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

效果圖：

說明：

border-collapse 屬性設置表格的邊框是否被合并為一個單一的邊框，還是象在標準的 HTML 中那樣分開顯示。

屬性值：

• separate    默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。

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

以上是“css如何去掉表格重復的邊框”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

當前文章：css如何去掉表格重復的邊框
當前鏈接：http://m.kartarina.com/article8/gesiop.html

成都網站建設公司_創新互聯，為您提供網站策劃、網站設計、定制開發、網頁設計公司、企業網站制作、電子商務

廣告

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