CSS表格中樣式的編寫是非常重要的,能夠美化表格,使其更加清晰易懂。
首先,我們需要選擇需要應(yīng)用樣式的表格,可以使用類名或ID選擇器。
.table { border-collapse: collapse; width: 100%; font-size: 1rem; color: #333; text-align: center; } .table th, .table td { border: 1px solid #ccc; padding: 0.5rem; } .table th { background-color: #f5f5f5; font-weight: bold; }
在以上代碼中,我們定義了表格的字體大小、顏色、邊框等樣式,同時使表格的內(nèi)容居中,并設(shè)置了表頭的背景色和加粗。
除此之外,我們還可以通過偽類選擇器來美化表格的效果,如:hover、:nth-child等。
.table tr:hover { background-color: #f0f0f0; } .table tr:nth-child(even) { background-color: #eee; }
以上代碼對于鼠標(biāo)滑過和偶數(shù)行都增加了背景色的效果。
總之,我們可以根據(jù)自己的需求來定制表格的樣式,讓其更加美觀和易于閱讀。