/* 基础现代风格表格 */
.table-modern {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.table-modern thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.table-modern th,
.table-modern td {
padding: 12px 15px;
}
.table-modern tbody tr {
border-bottom: 1px solid #dddddd;
}
.table-modern tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.table-modern tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.table-modern tbody tr:hover {
background-color: #f1f1f1;
cursor: pointer;
}
/* 简约风格表格 */
.table-minimal {
width: 100%;
border-collapse: collapse;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.table-minimal th {
text-align: left;
padding: 10px 15px;
border-bottom: 2px solid #e0e0e0;
font-weight: 500;
color: #555;
}
.table-minimal td {
padding: 10px 15px;
border-bottom: 1px solid #e0e0e0;
}
.table-minimal tr:hover td {
background-color: #f9f9f9;
}
/* 深色主题表格 */
.table-dark {
width: 100%;
border-collapse: collapse;
background-color: #2c3e50;
color: #ecf0f1;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.table-dark th {
padding: 15px;
text-align: left;
background-color: #34495e;
font-weight: 600;
letter-spacing: 0.5px;
}
.table-dark td {
padding: 12px 15px;
border-bottom: 1px solid #3d566e;
}
.table-dark tr:hover td {
background-color: #3d566e;
}
.table-dark tr:last-child td {
border-bottom: none;
}
圆角卡片式表格
/* 圆角卡片式表格 */
.table-card {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: 'Arial', sans-serif;
}
.table-card thead {
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
}
.table-card th {
padding: 15px 20px;
text-align: left;
font-weight: 500;
}
.table-card td {
padding: 12px 20px;
border-bottom: 1px solid #e0e0e0;
background-color: white;
}
.table-card tr:last-child td {
border-bottom: none;
}
.table-card tr:hover td {
background-color: #f8f9fa;
}
/* 响应式表格 */
.table-responsive {
width: 100%;
overflow-x: auto;
}
.responsive-table {
min-width: 600px;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
}
.responsive-table thead {
background-color: #f8f9fa;
}
.responsive-table th {
padding: 12px 15px;
text-align: left;
font-weight: 500;
color: #495057;
border-bottom: 2px solid #dee2e6;
}
.responsive-table td {
padding: 12px 15px;
border-bottom: 1px solid #dee2e6;
}
.responsive-table tr:hover {
background-color: rgba(0, 0, 0, 0.02);
}
/* 斑马条纹表格 */
.table-zebra {
width: 100%;
border-collapse: collapse;
font-family: 'Open Sans', sans-serif;
}
.table-zebra th {
background-color: #4a6fa5;
color: white;
padding: 12px;
text-align: left;
}
.table-zebra td {
padding: 10px 12px;
border-bottom: 1px solid #ddd;
}
.table-zebra tr:nth-child(even) {
background-color: #f2f2f2;
}
.table-zebra tr:hover {
background-color: #e6e6e6;
}
<!DOCTYPE html>
<html>
<head>
<title>美观表格示例</title>
<style>
/* 在这里粘贴您选择的CSS样式 */
.table-modern {
/* ... 上面的CSS样式 ... */
}
</style>
</head>
<body>
<table class="table-modern">
<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>
</tbody>
</table>
</body>
</html>
添加动画效果：
.table-animated tr {
transition: all 0.3s ease;
}
固定表头：
.table-fixed-header {
position: relative;
}
.table-fixed-header thead {
position: sticky;
top: 0;
z-index: 10;
}
单元格悬停效果：
.table-cell-hover td:hover {
background-color: #e3f2fd;
transform: scale(1.02);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
您可以根据项目需求混合搭配这些样式，或调整颜色、间距等参数以获得最佳视觉效果。
美观的表格 CSS 样式设置
发布时间：2025-9-14
分类：技术
标签： table 教程 博客 css
