<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蓝白底斑马纹表格</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和样式 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1e40af', // 深蓝色
secondary: '#dbeafe', // 浅蓝色
highlight: '#fef3c7', // 黄色高亮
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.table-zebra-blue {
@apply bg-white;
}
.table-zebra-blue tr:nth-child(even) {
@apply bg-secondary;
}
.table-zebra-blue th {
@apply bg-primary text-white font-bold py-3 px-4;
}
.table-zebra-blue td {
@apply py-3 px-4;
}
.table-zebra-blue tr:hover {
@apply bg-highlight transition-colors duration-200;
}
.table-container {
@apply overflow-x-auto rounded-lg shadow-md;
}
.table-header {
@apply text-xl font-bold text-primary mb-4 flex items-center;
}
.table-header-icon {
@apply mr-2 text-primary;
}
}
</style>
</head>
<body class="bg-gray-50 font-inter min-h-screen p-6 md:p-10">
<div class="max-w-7xl mx-auto">
<!-- 表格标题 -->
<div class="table-header">
<i class="fa fa-table table-header-icon text-2xl"></i>
<span>数据列表</span>
</div>
<!-- 表格容器 -->
<div class="table-container">
<table class="table-zebra-blue w-full">
<thead>
<tr>
<th class="text-left rounded-tl-lg">ID</th>
<th class="text-left">姓名</th>
<th class="text-left">部门</th>
<th class="text-left">职位</th>
<th class="text-left">入职日期</th>
<th class="text-left">状态</th>
<th class="text-right rounded-tr-lg">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>EMP001</td>
<td>张三</td>
<td>技术部</td>
<td>高级工程师</td>
<td>2022-01-15</td>
<td><span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">在职</span></td>
<td class="text-right">
<button class="text-primary hover:text-primary/80 mr-2 transition-colors">
<i class="fa fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700 transition-colors">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td>EMP002</td>
<td>李四</td>
<td>市场部</td>
<td>市场经理</td>
<td>2021-08-22</td>
<td><span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">在职</span></td>
<td class="text-right">
<button class="text-primary hover:text-primary/80 mr-2 transition-colors">
<i class="fa fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700 transition-colors">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td>EMP003</td>
<td>王五</td>
<td>人力资源部</td>
<td>HR专员</td>
<td>2022-03-10</td>
<td><span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">在职</span></td>
<td class="text-right">
<button class="text-primary hover:text-primary/80 mr-2 transition-colors">
<i class="fa fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700 transition-colors">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td>EMP004</td>
<td>赵六</td>
<td>财务部</td>
<td>财务主管</td>
<td>2020-11-05</td>
<td><span class="px-2 py-1 rounded-full bg-yellow-100 text-yellow-800 text-xs">休假</span></td>
<td class="text-right">
<button class="text-primary hover:text-primary/80 mr-2 transition-colors">
<i class="fa fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700 transition-colors">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td>EMP005</td>
<td>钱七</td>
<td>技术部</td>
<td>UI设计师</td>
<td>2023-02-18</td>
<td><span class="px-2 py-1 rounded-full bg-red-100 text-red-800 text-xs">离职</span></td>
<td class="text-right">
<button class="text-primary hover:text-primary/80 mr-2 transition-colors">
<i class="fa fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700 transition-colors">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td>EMP006</td>
<td>孙八</td>
<td>市场部</td>
<td>文案策划</td>
<td>2022-06-30</td>
<td><span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">在职</span></td>
<td class="text-right">
<button class="text-primary hover:text-primary/80 mr-2 transition-colors">
<i class="fa fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700 transition-colors">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td>EMP007</td>
<td>周九</td>
<td>技术部</td>
<td>前端开发</td>
<td>2021-09-12</td>
<td><span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">在职</span></td>
<td class="text-right">
<button class="text-primary hover:text-primary/80 mr-2 transition-colors">
<i class="fa fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700 transition-colors">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页控件 -->
<div class="mt-6 flex justify-between items-center">
<div class="text-sm text-gray-600">显示 1-7 条，共 24 条</div>
<div class="flex space-x-1">
<button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50 disabled:opacity-50" disabled>
<i class="fa fa-chevron-left"></i>
</button>
<button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
<button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">2</button>
<button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">3</button>
<button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">4</button>
<button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</div>
<script>
// 添加表格行悬停动画效果
document.addEventListener('DOMContentLoaded', function() {
const tableRows = document.querySelectorAll('.table-zebra-blue tbody tr');
tableRows.forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-1px)';
this.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.1)';
});
row.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = 'none';
});
});
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html