正在加载...
CSS 表格
表格的 CSS 工具箱
📊 一眼看清表格样式
| 属性 | 日常用途 |
|---|---|
border-collapse |
合并单元格边框（collapse）或保持分开（separate） |
border-spacing |
边框分开时单元格之间的间隙 |
width |
表格宽度（文章或卡片里常为 100%） |
th/td 的 padding |
单元格内留白 |
text-align / vertical-align |
单元格内水平与垂直对齐 |
通常给 table、th、td，有时还有 tr 设样式 — 而不是逐个单元格 — 好让整张数据表一致。
不会叠成双线的边框
不加处理时，相邻边框可能显得又粗又双。border-collapse: collapse 把它们收成一条干净线 — 数据表的日常选择。
合并的表格边框
css
CSS Code
table.data {
width: 100%;
border-collapse: collapse;
}
table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}分开边框与间距
若要单元格之间有可见空隙，用 border-collapse: separate 并设置 border-spacing。在 collapse 模式下 spacing 会被忽略。
带间隙的分开单元格
css
CSS Code
table.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}
table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}宽度、表头与对齐
全宽表格在文章里往往更好读。突出表头、对齐文字，单元格高度不同时用 vertical-align。
表头与单元格对齐
css
CSS Code
table.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}
table.data td {
text-align: left;
vertical-align: top;
}斑马行与平静悬停
交替背景有助于扫读宽表。tr 上的轻量 :hover 可标出当前行，不必霓虹吵闹。
斑马纹 + 行悬停
css
CSS Code
table.data tbody tr:nth-child(even) {
background: #fafafa;
}
table.data tbody tr:hover {
background: #eef5ff;
}平静的数据表习惯
合并边框，给单元格真实 padding，表头对比克制，只在宽表需要扫读帮助时再加斑马或悬停。
可读的文章表格
css
CSS Code
article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}自己动手
- 给
th/td设border-collapse: collapse和浅色边框。 - 在单元格内加舒适
padding。 - 表头左对齐；多行单元格试
vertical-align: top。 - 用
tr:nth-child(even)给偶数行加斑马纹。 - 加柔和的
tr:hover— 再与第二张表和border-spacing对比。
常见错误
- 保留默认分开边框，线条又双又乱
- 在
border-collapse: collapse时设border-spacing（会被忽略） - padding 太小，密集数据难读
- 霓虹悬停或过重斑马纹抢戏
- 把本课与
list-style标记混在一起（上一课）
小结
- 数据表平静默认是
border-collapse: collapse - 要单元格间隙就用
separate+border-spacing - 宽度、padding 与对齐塑造可读性
- 斑马行与轻悬停帮助扫读
- 结构放 HTML；外观交给 CSS
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
8
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部