css如何设置表格样式？常用属性与示例写法
设置表格样式时，核心不是一次堆很多属性，而是先处理边框、间距、对齐，再补充表头、隔行变色和移动端显示。下面按常见需求整理写法，方便直接套用和修改。
先明确表格样式由哪些部分组成
用 CSS 设置表格样式时，通常要同时处理 table、tr、th、td 这几类元素。很多人只给 table 加边框，结果单元格之间仍然很乱，原因就是没有继续设置单元格边框、内边距和对齐方式。实际开发里，表格是否清晰，主要看边框是否统一、内容是否留白、表头是否醒目，以及行与行之间是否容易分辨。先把这些基础项梳理好，再去加颜色和悬停效果，样式会更稳定。
- table 控制整张表的宽度、边框合并和整体布局。
- th 与 td 负责单元格边框、内边距、文字对齐和换行方式。
- 表头、隔行变色、悬停高亮属于增强样式，建议在基础样式完成后再补充。
基础表格样式的常用写法
最常见的需求是让表格线条整齐、内容不拥挤、宽度适配容器。这时可以先设置 width: 100%，再配合 border-collapse: collapse; 去掉双线边框。随后给 th 和 td 增加统一边框与内边距，让单元格内容更易读。如果是数据型表格，通常表头使用浅灰底色，并让文字加粗；如果是说明型表格，颜色可以更轻一些，但不要过度装饰，以免影响阅读效率。
完整示例
table { width: 100%; border-collapse: collapse; font-size: 14px;}th,td { border: 1px solid #dcdfe6; padding: 10px 12px; text-align: left;}th { background-color: #f5f7fa; font-weight: 700;}
让表格更清晰的增强样式
当基础样式完成后，可以继续增加隔行变色、鼠标悬停和标题强调，这些处理能明显提升可读性。隔行变色适合数据较多的表格，用户横向查看时不容易串行。悬停效果则适合后台列表、课程表、价格表等场景，能帮助用户快速定位当前行。要留意的是，颜色变化不要过重，最好保持低对比度，否则会抢走正文信息。
完整示例
tbody tr:nth-child(even) { background-color: #fafafa;}tbody tr:hover { background-color: #f0f7ff;}caption { caption-side: top; text-align: left; font-weight: 700; margin-bottom: 8px;}
常见问题与调整方法
表格样式设置后，如果效果不符合预期，通常集中在三个问题。第一是边框出现双线，多半是没有使用 border-collapse: collapse;。第二是内容过于拥挤，说明 td 和 th 的 padding 太小，或者字体太大。第三是移动端显示被压缩，这时不能只靠缩小字体，最好让外层容器支持横向滚动。对于较宽的数据表格，保留桌面端完整结构，再给移动端增加滚动，往往比强行换行更实用。
- 边框重复时，优先检查 table 是否设置了
border-collapse: collapse;。 - 表格过窄时，先调整单元格内边距和最小宽度，不要一开始就压缩文字。
- 移动端数据列较多时，可在外层加
overflow-x: auto;，提高可用性。
一个可直接套用的完整示例
如果你想快速看到 css 如何设置表格样式，可以直接从完整结构开始，再按项目风格微调颜色和间距。下面这组代码同时包含基础边框、表头样式、隔行变色和悬停效果，适合大多数文章页、后台页和说明页。实际使用时，只要把类名替换成自己的命名方式即可。如果页面已有全局样式，记得检查是否有表格默认样式覆盖当前规则。
完整示例
<div class="table-wrap"> <table class="demo-table"> <caption>课程安排表</caption> <thead> <tr> <th>时间</th> <th>课程</th> <th>讲师</th> </tr> </thead> <tbody> <tr> <td>09:00</td> <td>HTML 基础</td> <td>张老师</td> </tr> <tr> <td>10:30</td> <td>CSS 布局</td> <td>李老师</td> </tr> <tr> <td>14:00</td> <td>JavaScript 入门</td> <td>王老师</td> </tr> </tbody> </table></div>完整示例
.table-wrap { overflow-x: auto;}.demo-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 14px; color: #333333;}.demo-table th,.demo-table td { border: 1px solid #d9d9d9; padding: 10px 14px; text-align: left;}.demo-table th { background: #f3f6f9; font-weight: 700;}.demo-table tbody tr:nth-child(even) { background: #fafafa;}.demo-table tbody tr:hover { background: #eef6ff;}
写表格样式时，先把边框、间距和对齐设置好，再按需要补充表头和交互效果，通常就能得到清晰好用的表格。若页面还要兼顾手机端，记得优先考虑横向滚动方案。
