css制作精美表格
CSS 制作精美表格的方法
基础表格样式优化
通过设置边框、间距和背景色提升基础表格的可读性。使用 border-collapse: collapse 合并边框，避免双线效果。单元格内边距（padding）确保内容不紧贴边框。
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
}斑马纹效果
通过 nth-child(even/odd) 为交替行添加不同背景色，增强视觉引导。
tr:nth-child(even) {
background-color: #f9f9f9;
}悬停高亮 为表格行添加悬停效果，提升交互体验。
tr:hover {
background-color: #f1f1f1;
}圆角与阴影 为表格整体添加圆角和阴影，增加立体感。
table {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}表头固定
通过 position: sticky 实现滚动时表头固定。
thead th {
position: sticky;
top: 0;
background-color: #4CAF50;
color: white;
}响应式表格
使用 overflow-x: auto 确保小屏幕下表格可横向滚动。
.table-container {
overflow-x: auto;
}高级样式示例 结合渐变背景和动画效果。
th {
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
transition: all 0.3s;
}
th:hover {
background: linear-gradient(135deg, #a777e3, #6e8efb);
}注意事项
- 避免过度装饰影响可读性
- 确保颜色对比度符合无障碍标准
- 测试不同设备和浏览器的显示效果
