CSS二級表頭

table{
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
th{
background-color: #f2f2f2;
}
/* 二級表頭樣式 */
th span{
display: flex;
align-items: center;
}
th span:before{
content: '';
width: 10px;
height: 10px;
margin-right: 5px;
border-top: 1px solid #333;
border-right: 1px solid #333;
transform: rotate(-45deg);
}
th span:after{
content: '';
width: 10px;
height: 10px;
margin-left: 5px;
border-top: 1px solid #333;
border-right: 1px solid #333;
transform: rotate(45deg);
}
/* HTML代碼 */
一月
二月
三月
銷售
$1000
$2000
$2500
指標1
10%
20%
25%
指標2
20%
30%
35%

上面是一個簡單的CSS二級表頭示例，其中通過添加span標簽和使用偽元素來實現了二級表頭的樣式。使用CSS二級表頭可以有效地展示表格數據，增強表格的可讀性。