CSS 表格
border-collapse、斑马纹、悬停高亮、响应式表格、caption-side
CSS 表格
CSS 让表格从"数据库样式"变成美观的数据展示。
学完本章你将： 掌握 border-collapse、斑马纹、悬停高亮、响应式表格。
基本美化
css
table {
border-collapse: collapse; /* 合并边框 */
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}斑马纹
css
tr:nth-child(even) { background-color: #f2f2f2; }悬停高亮
css
tr:hover { background-color: #ddd; }响应式表格
css
/* 小屏幕时出现水平滚动条 */
.table-wrapper {
overflow-x: auto;
}完整示例
css
table {
border-collapse: collapse;
width: 100%;
font-size: 14px;
}
th, td {
padding: 10px 15px;
border-bottom: 1px solid #e0e0e0;
}
th {
background: #f5f5f5;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
}
tr:hover { background: #fafafa; }