在網頁設計中,表格是非常常見的元素,它可以用來展示各種數據、圖表、排版等。而在CSS中,我們可以通過設置表格的樣式來使其更美觀,更符合我們的需求。
/* 表格樣式 */ table { border-collapse: collapse; /* 合并邊框 */ width: 100%; /* 寬度100% */ margin: 20px 0; /* 上下間距20px */ } th, td { padding: 8px; /* 單元格內邊距 */ text-align: left; /* 左對齊 */ border-bottom: 1px solid #ddd; /* 底部間隔線 */ } th { background-color: #f2f2f2; /* 表頭背景色 */ color: #333; /* 表頭文字顏色 */ } /* 奇偶行交替背景色 */ tr:nth-child(even) { background-color: #f2f2f2; } tr:nth-child(odd) { background-color: #fff; }
這里我們先定義了表格的基本樣式,首先通過border-collapse:collapse將單元格邊框合并,控制表格寬度的時候可以直接用寬度為100%來實現。然后為表格中的表頭
在基本樣式定義完成之后,為了增加表格的可讀性,我們還可以添加奇偶行交替的背景色。這需要使用到CSS3的偽類選擇器——nth-child。其語法為:
/* 偶數行 */ tr:nth-child(even) { background-color: #f2f2f2; } /* 奇數行 */ tr:nth-child(odd) { background-color: #fff; }
這樣,我們就可以將大部分程序員最愛的黑白顏色突破一下,添加些漂亮的顏色來使表格更加美觀。
上一篇css網頁跟隨瀏覽器大小
下一篇mysql字符串轉成數字