CSS表格是網頁設計中不可或缺的元素之一。在設置表格的時候,我們常常需要設置內外邊框以及背景顏色等CSS屬性來美化表格的樣式。有時候,我們會想要讓表格的內外邊框顏色不同,這實際上可以通過CSS樣式來實現。
讓我們來看一下如何設置表格的內外邊框不同色:
table { border-collapse: collapse; border-spacing: 0; } td, th { border: 1px solid #ccc; padding: 8px; } /* 外邊框 */ table.outside-border { border: 1px solid #000; } /* 內邊框 */ table.inside-border td, table.inside-border th { border: 1px solid #ccc; } table.inside-border td:first-child, table.inside-border th:first-child { border-left: 1px solid #000; } table.inside-border td:last-child, table.inside-border th:last-child { border-right: 1px solid #000; } table.inside-border tr:first-child td, table.inside-border thead th { border-top: 1px solid #000; } table.inside-border tr:last-child td, table.inside-border tfoot th { border-bottom: 1px solid #000; }
在上面的代碼中,我們使用了table
選擇器來設置表格的樣式,并在表格中使用了td
和th
選擇器來設置單元格的樣式。接下來,我們設置了外邊框和內邊框的樣式,并使用偽類選擇器:first-child
和:last-child
來實現內邊框的效果。
具體來說,table.outside-border
設置了表格的外邊框和顏色,table.inside-border
設置了表格的內邊框和顏色。使用:first-child
和:last-child
選擇器來設置表格的左右邊框,使用:first-child
選擇器和thead
選擇器來設置表格的頂部邊框,使用:last-child
選擇器和tfoot
選擇器來設置表格的底部邊框。
使用以上樣式設置表格內外邊框顏色不同,可以讓表格看起來更加美觀而有條理。如果您有更好的設置方法,歡迎分享!
上一篇css表格選中指定單元格
下一篇css插入圖片的代碼