在網站設計中,表格是一個非常重要的元素,而CSS表格更是讓網站呈現出非常漂亮的效果。以下是一些好看的CSS表格樣式:
.table { border-collapse: collapse; width: 100%; } .table th, .table td { padding: 12px 15px; text-align: left; border: 1px solid #ddd; } .table th { background-color: #f2f2f2; font-weight: bold; } .table tbody tr:nth-child(even) { background-color: #f2f2f2; } .table tbody tr:hover { background-color: #ddd; }
這是一個簡單的表格樣式,它具有以下特點:
- 表頭具有粗體、淺灰色背景色
- 單元格根據內容自適應寬度
- 每隔一行背景色為淺灰色
- 鼠標懸停在單元格上時,背景色變為深灰色
以下是另外一個好看的CSS表格樣式:
.table { border-collapse: collapse; width: 100%; } .table th, .table td { padding: 8px 12px; text-align: center; border: 1px solid #ddd; } .table th { background-color: #f2f2f2; font-weight: bold; } .table tbody tr:nth-child(even) { background-color: #f2f2f2; } .table tbody tr:hover { background-color: #ddd; } .table td:first-child, .table th:first-child { border-left: none; } .table td:last-child, .table th:last-child { border-right: none; }
這個表格樣式具有以下特點:
- 表頭具有粗體、淺灰色背景色
- 單元格居中對齊
- 每隔一行背景色為淺灰色
- 鼠標懸停在單元格上時,背景色變為深灰色
- 邊框左側和右側沒有橫線
無論哪種樣式,好看的CSS表格都會給網站帶來更美觀、更舒適的用戶體驗。
上一篇好看的css背景漸變代碼
下一篇mysql專題優化