CSS 中表格（Table）的用法
在网页设计中，表格是一种常见且强大的工具，用于展示结构化数据。虽然 HTML 提供了基本的表格结构，但 CSS 可以极大地增强表格的外观和用户体验。以下是如何使用 CSS 来样式化 HTML 表格的详细指南。
一、HTML 表格基础
首先，让我们回顾一下如何在 HTML 中创建一个简单的表格：
<table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </tbody> </table>在这个例子中，<table> 标签定义了表格，<thead> 包含表头行，<tbody> 包含数据行，而 <tr> 定义行，<th> 和 <td> 分别定义表头和单元格。
二、CSS 样式化表格
接下来，我们将通过 CSS 来样式化这个表格。你可以直接在 HTML 文件中的 <style> 标签内编写 CSS，或者将 CSS 放在外部文件中并通过 <link> 标签引入。
1. 基本样式
/* 为整个表格设置边框和内边距 */ table { width: 100%; border-collapse: collapse; /* 使边框合并为一个单一的边框 */ } th, td { border: 1px solid #ddd; /* 添加边框 */ padding: 8px; /* 设置内边距 */ } th { background-color: #f2f2f2; /* 表头背景颜色 */ text-align: left; /* 对齐文本 */ }2. 斑马条纹效果
为了使表格更易于阅读，可以为行添加斑马条纹效果：
tbody tr:nth-child(even) { background-color: #f9f9f9; /* 偶数行的背景颜色 */ }3. 悬停效果
当用户将鼠标悬停在某一行上时，可以更改该行的背景颜色：
tbody tr:hover { background-color: #f1f1f1; /* 悬停时的背景颜色 */ }4. 固定表头
如果你希望表头在页面滚动时保持固定位置，可以使用一些额外的 CSS 和 JavaScript（或使用纯 CSS 的 position: sticky）：
thead th { position: -webkit-sticky; /* 对于 Safari */ position: sticky; /* 其他浏览器 */ top: 0; /* 固定在顶部 */ z-index: 1; /* 确保表头在其他内容之上 */ background-color: #f2f2f2; /* 保持背景颜色不变 */ }注意：为了确保 position: sticky 正常工作，父元素（通常是 <table> 或其容器）不应有 overflow: hidden 或类似的属性，因为这可能会限制粘性定位的效果。
三、响应式表格
对于移动设备，你可能需要使表格更加响应式。这通常涉及到隐藏某些列或转换为堆叠布局：
@media screen and (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; } th { position: -webkit-sticky; position: sticky; top: 0; left: 0; background-color: #f2f2f2; z-index: 1; } td { text-align: right; padding-left: 50%; /* 留出空间给表头 */ position: relative; } td::before { content: attr(data-label); /* 使用 data-label 属性显示表头名称 */ position: absolute; left: 10px; width: calc(50% - 20px); /* 与 padding-left 对应 */ white-space: nowrap;