表格折疊是一種常見的效果，用于對(duì)表格進(jìn)行更加清晰的展示。在CSS中，可以使用偽類和選擇器來實(shí)現(xiàn)表格折疊效果，下面我們一起來看一下具體的實(shí)現(xiàn)方法。

table {
border-collapse: collapse;
}
table tr:not(:first-child) {
display: none;
}
table tr.is-open {
display: table-row;
}
table .toggle:not(.is-open)::after {
content: "+";
}
table .toggle.is-open::after {
content: "-";
}

首先，在表格樣式中，我們需要將邊框合并，以免折疊時(shí)留下多余的邊框線。代碼為：border-collapse: collapse;

接著，我們需要設(shè)置一個(gè)選擇器來隱藏除了表頭以外的所有行。這里使用偽類:not(:first-child)來排除第一行。代碼為：

table tr:not(:first-child) {
display: none;
}

然后，我們需要另一個(gè)選擇器來用于當(dāng)用戶點(diǎn)擊折疊按鈕時(shí)展開或折疊表格。這里使用equals(=)選擇器來選中包含特定class的元素。代碼為：

table tr.is-open {
display: table-row;
}

最后，我們需要設(shè)置一個(gè)偽元素選擇器來修改折疊按鈕的樣式。這個(gè)選擇器會(huì)根據(jù)它所在的元素是否包含is-open class來判斷折疊按鈕應(yīng)該顯示+號(hào)還是-號(hào)。代碼為：

table .toggle:not(.is-open)::after {
content: "+";
}
table .toggle.is-open::after {
content: "-";
}

通過以上CSS代碼的設(shè)置，我們成功的實(shí)現(xiàn)了表格折疊效果。