pin_drop当前位置:知识文库 ❯ 图文
HTML表格：HTML表格CSS样式美化教程 斑马纹悬停圆角阴影
一、教程简介
默认的 HTML 表格外观简陋——没有边框、没有背景色、间距紧凑，几乎无法直接用于生产环境。通过 CSS，我们可以将原始的表格转变为美观、专业、易读的数据展示组件。从基本的边框和内边距，到高级的斑马纹、悬停效果和渐变背景，CSS 为表格样式提供了丰富的控制能力。
本教程将系统讲解使用 CSS 美化 HTML 表格的各种方法，涵盖边框、背景色、文字排版、斑马纹、悬停效果、圆角、阴影等常用技巧，帮助你打造出视觉出色的表格组件。
二、核心概念
border-collapse —— 边框合并
这是表格样式中最关键的属性。它决定了相邻单元格的边框是合并为一条还是各自独立显示。
-
separate（默认值）：每个单元格有独立的边框，相邻边框之间会有间隙
-
collapse：相邻单元格的边框合并为一条，消除双线效果
border-spacing —— 边框间距
当 border-collapse: separate 时，此属性控制相邻单元格边框之间的距离。接受一个或两个长度值：一个值表示水平和垂直间距相同；两个值分别表示水平和垂直间距。
padding —— 单元格内边距
控制单元格内容与边框之间的空间，直接影响表格的可读性。应在 th 和 td 上设置，而非 tr 上。
text-align —— 水平对齐
控制单元格内容的水平对齐方式。数值通常右对齐，文本左对齐，标题居中。
vertical-align —— 垂直对齐
控制单元格内容的垂直对齐方式。当单元格高度不一致时尤为重要。
斑马纹（Zebra Striping）
交替行使用不同的背景色，帮助用户在横向阅读时追踪行数据，是提升表格可读性的经典手法。
悬停效果（Hover Effect）
鼠标悬停在行或单元格上时改变其样式，提供视觉反馈，帮助用户定位数据。
三、语法与用法
边框相关属性
代码示例
/* 边框合并 —— 最常用的表格样式设置 */
table {
border-collapse: collapse;
}
/* 边框间距（仅在 separate 模式下有效） */
table {
border-collapse: separate;
border-spacing: 5px; /* 水平和垂直都是 5px */
border-spacing: 5px 10px; /* 水平 5px，垂直 10px */
}
/* 单元格边框 */
th, td {
border: 1px solid #ccc; /* 统一边框样式 */
}内边距与对齐
代码示例
th, td {
padding: 8px 12px; /* 上下 8px，左右 12px */
text-align: left; /* 水平左对齐 */
vertical-align: middle; /* 垂直居中 */
}斑马纹
代码示例
/* 偶数行变色 */
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 奇数行变色 */
tbody tr:nth-child(odd) {
background-color: #ffffff;
}悬停效果
代码示例
/* 行悬停 */
tbody tr:hover {
background-color: #e8f4fd;
}
/* 单元格悬停 */
td:hover {
background-color: #d4edfc;
}表格宽度控制
代码示例
table {
width: 100%; /* 占满容器宽度 */
max-width: 800px; /* 最大宽度限制 */
table-layout: fixed; /* 固定布局算法，提升渲染性能 */
}
/* 配合 table-layout: fixed 使用 */
th, td {
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出显示省略号 */
white-space: nowrap; /* 禁止换行 */
}四、代码示例
示例 1：基础美化表格
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础美化表格</title>
<style>
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f5f6fa;
padding: 20px;
}
table {
border-collapse: collapse;
width: 100%;
max-width: 700px;
margin: 0 auto;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
caption {
font-size: 1.3em;
font-weight: bold;
padding: 15px;
color: #2c3e50;
}
th, td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #eee;
}
thead th {
background-color: #2c3e50;
color: #fff;
font-weight: 600;
}
tbody tr:last-child td {
border-bottom: none;
}
tbody tr:hover {
background-color: #f0f3f5;
}
</style>
</head>
<body>
<table>
<caption>城市天气信息</caption>
<thead>
<tr>
<th>城市</th>
<th>天气</th>
<th>温度</th>
<th>湿度</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京</td>
<td>晴</td>
<td>22C</td>
<td>35%</td>
</tr>
<tr>
<td>上海</td>
<td>多云</td>
<td>24C</td>
<td>65%</td>
</tr>
<tr>
<td>广州</td>
<td>阵雨</td>
<td>28C</td>
<td>82%</td>
</tr>
</tbody>
</table>
</body>
</html>示例 2：斑马纹 + 悬停效果
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>斑马纹与悬停效果</title>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 750px;
margin: 0 auto;
background-color: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
thead th {
background-color: #3498db;
color: #fff;
font-weight: 600;
position: sticky;
top: 0;
z-index: 1;
}
/* 斑马纹：偶数行浅蓝背景 */
tbody tr:nth-child(even) {
background-color: #ebf5fb;
}
/* 悬停效果 */
tbody tr:hover {
background-color: #d4e6f1;
transition: background-color 0.2s ease;
}
/* 数值列右对齐 */
.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* 状态标签 */
.status {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-size: 0.85em;
font-weight: 600;
}
.status-active {
background-color: #d5f5e3;
color: #27ae60;
}
.status-pending {
background-color: #fef9e7;
color: #f39c12;
}
</style>
</head>
<body>
<table>
<caption>用户账户管理</caption>
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th class="num">余额（元）</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhangwei</td>
<td>zhangwei@example.com</td>
<td class="num">12,580.00</td>
<td><span class="status status-active">活跃</span></td>
</tr>
<tr>
<td>wanglei</td>
<td>wanglei@example.com</td>
<td class="num">3,100.00</td>
<td><span class="status status-pending">待审核</span></td>
</tr>
</tbody>
</table>
</body>
</html>示例 3：圆角 + 渐变 + 阴影 —— 高级视觉效果
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高级视觉效果表格</title>
<style>
body {
font-family: "Microsoft YaHei", sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.table-container {
background-color: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 700px;
}
.table-header {
background: linear-gradient(135deg, #2c3e50, #3498db);
padding: 20px 24px;
color: #fff;
}
thead th {
background-color: #f8f9fa;
color: #495057;
font-weight: 600;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid #dee2e6;
}
tbody tr {
transition: all 0.2s ease;
}
tbody tr:hover {
background-color: #f0f7ff;
transform: scale(1.005);
}
.progress-bar {
width: 100%;
height: 6px;
background-color: #eee;
border-radius: 3px;
overflow: hidden;
}
.progress-fill.high { background: linear-gradient(90deg, #27ae60, #2ecc71); }
.progress-fill.medium { background: linear-gradient(90deg, #f39c12, #f1c40f); }
.progress-fill.low { background: linear-gradient(90deg, #e74c3c, #c0392b); }
</style>
</head>
<body>
<div class="table-container">
<div class="table-header">
<h2>项目进度总览</h2>
<p>2026年第二季度</p>
</div>
<table>
<thead>
<tr>
<th>项目名称</th>
<th>负责人</th>
<th>进度</th>
<th>完成度</th>
</tr>
</thead>
<tbody>
<tr>
<td>电商平台重构</td>
<td>张伟</td>
<td>进行中</td>
<td>
<div class="progress-bar">
<div class="progress-fill high" style="width: 85%"></div>
</div>
<small>85%</small>
</td>
</tr>
<tr>
<td>移动端适配</td>
<td>李娜</td>
<td>进行中</td>
<td>
<div class="progress-bar">
<div class="progress-fill medium" style="width: 55%"></div>
</div>
<small>55%</small>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>示例 4：固定表头 + 可滚动表体
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定表头可滚动表格</title>
<style>
.scrollable-table-wrapper {
max-height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 8px;
width: 100%;
max-width: 700px;
margin: 0 auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid #eee;
}
/* 固定表头 */
thead th {
background-color: #2c3e50;
color: #fff;
font-weight: 600;
position: sticky;
top: 0;
z-index: 2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #e8f0fe;
}
.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
</style>
</head>
<body>
<div class="scrollable-table-wrapper">
<table>
<thead>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>分类</th>
<th class="num">单价（元）</th>
<th class="num">库存</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>机械键盘 K8</td><td>外设</td><td class="num">399.00</td><td class="num">156</td></tr>
<tr><td>2</td><td>无线鼠标 M3</td><td>外设</td><td class="num">129.00</td><td class="num">320</td></tr>
<tr><td>3</td><td>27寸显示器</td><td>显示器</td><td class="num">1,899.00</td><td class="num">45</td></tr>
<!-- 更多行... -->
</tbody>
</table>
</div>
</body>
</html>五、浏览器兼容性
六、注意事项与最佳实践
1. 始终使用 border-collapse: collapse
除非有特殊的视觉需求，否则表格应始终设置 border-collapse: collapse，消除双线边框效果。
2. 数值列右对齐
数值数据应右对齐，便于用户比较数值大小。使用 font-variant-numeric: tabular-nums 确保数字等宽对齐。
3. 表格圆角需要配合 overflow: hidden
border-radius 直接应用在
