在網頁設計中,表格是一個常用的元素。為了讓頁面更加美觀,我們可以用CSS來給表格添加不同的樣式。其中,換色就是一種常用的方法。
table { border-collapse: collapse; width: 100%; max-width: 800px; /* 設置最大寬度 */ margin: 0 auto; /* 居中顯示 */ } td, th { border: 1px solid #ccc; padding: 8px; text-align: center; } tr:nth-child(2n) td { background-color: #f7f7f7; } tr:nth-child(2n+1) td { background-color: #fff; }
如上代碼所示,我們使用了CSS中的nth-child選擇器,它可以選擇表格中的奇偶行進行樣式設置。
其中,tr:nth-child(2n) td 表示選擇每隔兩行的td元素(即偶數行),background-color: #f7f7f7; 設置了其背景色為淺灰色;而tr:nth-child(2n+1) td 則表示選擇每隔兩行加一的td元素(即奇數行),background-color: #fff; 設置了其背景色為白色。這樣,表格的不同行就會呈現不同的顏色了。
值得一提的是,在設置表格的樣式時,我們通常需要設置表格寬度、邊框、單元格間距、文字對齊等等屬性,具體請參照上述代碼。