CSS 表格是網頁設計中常用的布局方式之一,經常需要對表格中的列進行樣式化處理。本文將介紹一些常用的 CSS 表格列樣式,以幫助您實現更美觀的表格布局。
/* 設置表格列的寬度 */ table { table-layout: fixed; /* 固定列寬 */ } th, td { width: 100px; /* 設置列寬 */ } /* 設置表格列的背景色 */ th { background-color: #eee; /* 設置表頭列的背景色 */ } td { background-color: #fff; /* 設置表格數據列的背景色 */ } /* 設置表格列的邊框 */ th, td { border: 1px solid #ccc; /* 設置邊框樣式 */ } /* 設置表格列的字體 */ td { font-size: 14px; /* 設置字體大小 */ font-weight: bold; /* 設置字體粗細 */ text-align: center; /* 設置居中對齊 */ } /* 設置表格列的鼠標樣式 */ td:hover { cursor: pointer; /* 鼠標指針變為手形 */ } /* 設置表格列的顏色 */ td.red { color: red; /* 設置為紅色 */ } td.blue { color: blue; /* 設置為藍色 */ }
上述代碼中,通過設置表格列的寬度、背景色、邊框、字體、鼠標樣式和顏色,可以實現不同的表格布局效果。