CSS 表格中 th 標簽加邊框可以讓表格更美觀,增加可讀性。下面介紹幾種方法實現 th 加邊框。
方法一:使用 border 屬性
table th {
border: 1px solid #ccc;
padding: 5px;
}
該方法使用 CSS border 屬性為 th 元素添加邊框,并使用 padding 屬性設置單元格內邊距。這種方式實現簡單,適用于表格數量較少的頁面。
方法二:使用偽元素 before 和 after
table th {
position: relative;
}
table th:before,
table th:after {
content: '';
display: block;
position: absolute;
border: 1px solid #ccc;
height: calc(100% - 2px);
width: calc(100% - 2px);
}
table th:before {
top: 0;
left: 0;
}
table th:after {
bottom: 0;
right: 0;
}
該方法使用 CSS 偽元素 before 和 after,為 th 元素添加左右兩個邊框。使用 position 屬性將 th 設置為 relative,使偽元素的 position 參照于其所在元素。并使用 calc 函數和 border 屬性控制邊框寬度和高度,使其不會影響其所在單元格的大小。
方法三:使用 border-collapse 和 :first-child
table {
border-collapse: collapse;
}
table th:first-child {
border-left: 1px solid #ccc;
}
table th {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px;
}
該方法使用 CSS border-collapse 屬性,將表格單元格邊框合并為一條共同的邊框。使用 :first-child 選擇器為第一列 th 元素再添加左邊框,其他邊框同樣使用 border 屬性添加,再加上合適的 padding 使表格更美觀。
以上三種方法都可以實現 th 加邊框的效果,具體選擇哪種方法,可以根據實際情況需求自行進行調整和選擇。
上一篇css th td 樣式
下一篇css li在同一