在網頁設計中,表格是非常常見的組件之一。然而,原生的表格樣式可能并不夠美觀或符合設計需求。這時,我們可以利用CSS來對表格進行美化。
table { border-collapse: collapse; /* 把單元格的邊框合并 */ width: 100%; /* 讓表格寬度占滿父容器 */ } /* 設置表頭樣式 */ thead { background-color: #f2f2f2; /* 表頭背景色 */ } /* 設置奇偶行背景色 */ tr:nth-child(odd) { background-color: #f9f9f9; } /* 設置鼠標懸浮樣式 */ tr:hover { background-color: #ddd; /* 鼠標懸浮行背景色 */ } /* 設置單元格邊框、內邊距和對齊方式 */ td, th { border: 1px solid #ddd; /* 單元格邊框 */ padding: 8px; /* 單元格內邊距 */ text-align: left; /* 對齊方式 */ }
上述代碼展示了如何利用CSS實現表格美化,包括單元格邊框合并、設置表頭樣式、設置奇偶行背景色、設置鼠標懸浮樣式以及設置單元格邊框、內邊距和對齊方式等。我們可以按照實際需求進行調整和修改。
上一篇swiper css
下一篇mysql5與8的語法