表格折疊是一種常見的效果,用于對表格進行更加清晰的展示。在CSS中,可以使用偽類和選擇器來實現表格折疊效果,下面我們一起來看一下具體的實現方法。
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: "-"; }
首先,在表格樣式中,我們需要將邊框合并,以免折疊時留下多余的邊框線。代碼為:border-collapse: collapse;
接著,我們需要設置一個選擇器來隱藏除了表頭以外的所有行。這里使用偽類:not(:first-child)
來排除第一行。代碼為:
table tr:not(:first-child) { display: none; }
然后,我們需要另一個選擇器來用于當用戶點擊折疊按鈕時展開或折疊表格。這里使用equals(=)
選擇器來選中包含特定class的元素。代碼為:
table tr.is-open { display: table-row; }
最后,我們需要設置一個偽元素選擇器來修改折疊按鈕的樣式。這個選擇器會根據它所在的元素是否包含is-open class來判斷折疊按鈕應該顯示+號還是-號。代碼為:
table .toggle:not(.is-open)::after { content: "+"; } table .toggle.is-open::after { content: "-"; }
通過以上CSS代碼的設置,我們成功的實現了表格折疊效果。
上一篇css實現細邊框線
下一篇html加css文件路徑