CSS 表格是網(wǎng)頁中常見的一種元素,它可以展示數(shù)據(jù)、排版布局等。在一些情況下,我們需要隱藏表格的某些列或行,這時候就可以使用 CSS 來實現(xiàn)。下面介紹的是如何使用 CSS 實現(xiàn)表格的默認隱藏。
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } /* 表格的默認隱藏 */ tbody tr { display: none; } /* 顯示第一行 */ tbody tr:first-child { display: table-row; }
上述代碼中,我們使用display: none;
隱藏了表格中的所有行,然后通過子選擇器tbody tr:first-child
顯示第一行。其中,tbody
標(biāo)簽用來選取表格的內(nèi)容區(qū)域,tr:first-child
表示第一個子元素是tr
標(biāo)簽的元素(即第一行)。
如果想要顯示其他行,只需要修改子選擇器中的:first-child
。例如,如果想要顯示第二行,可以將:first-child
改為:nth-child(2)
。
上述代碼僅實現(xiàn)了表格的默認隱藏。如果需要實現(xiàn)更復(fù)雜的表格顯示效果,可以結(jié)合使用其他 CSS 屬性,比如border
、background-color
、color
等。