CSS3表格樣式代碼是一種簡(jiǎn)單而又實(shí)用的技術(shù),它能夠使一個(gè)網(wǎng)站的表格變得更加美觀和易讀。下面就來(lái)看一些 CSS3 表格樣式的代碼示例:
/* 表格基本樣式 */ table { font-family: "Helvetica Neue", "Helvetica", sans-serif; border-collapse: collapse; width: 100%; } thead { background-color: #ddd; } th { font-weight: 500; text-align: left; padding: 12px; border: 1px solid black; } td { padding: 12px; border: 1px solid black; } /* 斑馬條紋樣式 */ tr:nth-child(even) { background-color: #f2f2f2; } /* 鼠標(biāo)懸停時(shí)樣式 */ tr:hover { background-color: #ccc; } /* 響應(yīng)式表格 */ @media (max-width: 768px) { table { font-size: 14px; } th, td { padding: 10px; } td:nth-of-type(1)::before { content: "Name: "; } td:nth-of-type(2)::before { content: "Phone: "; } td:nth-of-type(3)::before { content: "Email: "; } td:nth-of-type(4)::before { content: "Address: "; } }
可以看到,上面的代碼定義了幾個(gè)基本的表格樣式,包括表格的字體、邊框等。其中,thead
用于定義表格頭的樣式,th
定義表頭單元格的樣式,td
定義普通單元格的樣式。
除了基本樣式,代碼還定義了斑馬條紋樣式和鼠標(biāo)懸停時(shí)的樣式,以使表格更加易讀。同時(shí),代碼還定義了一個(gè)響應(yīng)式表格,可以在小屏幕設(shè)備上呈現(xiàn)更好的排版效果。
總之,使用 CSS3 表格樣式代碼能夠有效地提高表格的可讀性,使網(wǎng)站更加美觀和易用。