好看的表格是網頁設計中必不可少的一部分,表格的樣式往往是通過 CSS 實現的。下面給大家介紹一些實現好看表格的 CSS 技巧。
/* 設置表格的外邊距和內邊距 */ table { margin: 20px; padding: 0; border-collapse: collapse; } /* 設置表格的邊框 */ td, th { border: 1px solid #ddd; padding: 8px; text-align: left; } /* 設置表頭的背景色和文字顏色 */ th { background-color: #333; color: #fff; } /* 設置隔行變色 */ tr:nth-child(even) { background-color: #f2f2f2; } /* 設置鼠標懸停時的背景色 */ tr:hover { background-color: #ddd; } /* 設置表格列寬 */ td:nth-child(1), th:nth-child(1) { width: 20%; } td:nth-child(2), th:nth-child(2) { width: 30%; } td:nth-child(3), th:nth-child(3) { width: 50%; }
通過以上 CSS 樣式,我們可以實現表格的外邊距和內邊距的設置,以及表格的邊框,表頭的背景色和文字顏色,表格隔行變色,鼠標懸停時的背景色等效果。
同時,通過設置表格列寬,我們可以使表格看起來更加美觀和整齊。
總之,精美的表格設計可以為網頁增添很多亮點,通過上述 CSS 技巧,相信大家可以輕松實現自己想要的表格樣式。