纯css实现好看的table表格css样式
封面图
•
2025-10-10
•
Html/Css
167
0
0
0
使用纯 CSS 实现一个**好看、现代的表格样式**,可以借助一些 CSS 技巧,如 `border-collapse`、`box-shadow`、`hover 效果`、`渐变背景`、`圆角边框` 等。以下是一个示例代码,展示如何用纯 CSS 实现一个美观的表格。 --- ### ✅ 示例:纯 CSS 实现好看的表格样式 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>好看的表格</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f4f4; padding: 20px; } table { width: 100%; border-collapse: collapse; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; background: #fff; } th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #ddd; } th { background: linear-gradient(to right, #6a11cb, #2575fc); color: white; font-weight: bold; } tr:hover { background-color: #f0f0f0; } tr:nth-child(even) { background-color: #f9f9f9; } tr:nth-child(odd) { background-color: #fff; } /* 可选:添加悬停效果 */ tr:hover { transform: scale(1.01); transition: transform 0.2s ease; } </style> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> <th>职业</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>28</td> <td>北京</td> <td>程序员</td> </tr> <tr> <td>李四</td> <td>32</td> <td>上海</td> <td>设计师</td> </tr> <tr> <td>王五</td> <td>25</td> <td>广州</td> <td>运营</td> </tr> <tr> <td>赵六</td> <td>30</td> <td>深圳</td> <td>产品经理</td> </tr> </tbody> </table> </body> </html> ``` --- ### 🎨 样式说明: | 属性 | 说明 | |------|------| | `border-collapse: collapse;` | 合并表格边框 | | `box-shadow` | 给表格加阴影,提升立体感 | | `border-radius` | 圆角边框,更现代 | | `linear-gradient` | 表头渐变色,视觉更好看 | | `tr:hover` | 鼠标悬停时行变色,增强交互体验 | | `nth-child` | 交替行颜色,提高可读性 | --- ### 💡 提示: - 如果你想要更复杂的样式(如响应式表格、分页等),可以结合 JavaScript 或使用框架(如 Bootstrap)。 - 这个样式适用于大多数现代浏览器,兼容性良好。 --- 如果你有特定的风格(比如极简风、暗黑风、卡片式等),我可以为你定制不同的 CSS 样式。需要的话告诉我!
上一篇:
使用meta标签renderer指定双核浏览器以IE浏览器内核渲染网页
下一篇:
伪类link,hover,active,visited,focus的区别
标题录入,一次不能超过6条
返回顶部
留言
留言
评论