首頁 > web前端 > css教學 > css怎麼去掉表格重複的邊框

css怎麼去掉表格重複的邊框

青灯夜游
發布: 2023-02-17 15:44:59
原創
7125 人瀏覽過

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

css怎麼去掉表格重複的邊框

本教學操作環境: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 屬性。      

相關介紹:

#border 是邊框屬性的簡寫屬性。

CSS border 屬性用來指定元素邊框的樣式、寬度和顏色。

可以設定的屬性分別(依序):border-width, border-style 和 border-color。

也可以只設定一個值,例如 border:#FF0000; 是正確的,其他值會設定成對應屬性的初始值。

語法格式

可以使用下面列出的一個,兩個或三個值來指定border 屬性,值的順序無關緊要:

/* 边框样式 */
border: solid;
/* 边框宽度 | 边框样式 */
border: 2px dotted;
/* 边框样式 | 边框颜色 */
border: outset #f33;
/* 边框宽度 | 边框样式 | 边框颜色 */
border: medium dashed green;
/* 全局值 */
border: inherit;
border: initial;
border: unset;
登入後複製

注意:如果邊框的樣式未定義,它將不可見。這是因為樣式預設 為none。

相關推薦:《css影片教學

以上是css怎麼去掉表格重複的邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板