CSS中Table表格样式是如何设置的

在网页开发中，表格是展示结构化数据的重要载体，通过CSS可以对表格的边框、间距、背景、对齐方式等样式进行全方位定制，让数据展示更清晰美观。下面结合实际代码讲解常见的表格样式设置方法。

基础表格结构

首先准备一个基础的HTML表格结构，后续所有样式都基于这个结构进行设置：

<table class="demo-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>前端开发</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>28</td>
      <td>后端开发</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>测试工程师</td>
    </tr>
  </tbody>
</table>

常见表格样式设置

1. 边框与边框合并

默认表格的单元格边框是分离的，我们可以通过border-collapse属性将边框合并，同时设置边框样式：

.demo-table {
  /* 合并边框 */
  border-collapse: collapse;
  /* 表格整体宽度 */
  width: 100%;
  /* 表格整体边框 */
  border: 1px solid #e0e0e0;
}
.demo-table th, .demo-table td {
  /* 单元格边框 */
  border: 1px solid #e0e0e0;
  /* 单元格内边距 */
  padding: 12px 15px;
  /* 文本左对齐 */
  text-align: left;
}

2. 表头样式定制

表头通常需要和单元格区分开，我们可以单独设置th的样式：

.demo-table th {
  /* 表头背景色 */
  background-color: #f5f7fa;
  /* 表头文字加粗 */
  font-weight: 600;
  /* 表头文字颜色 */
  color: #333;
}

3. 奇偶行背景色区分

为了提升表格可读性，可以给奇数行和偶数行设置不同的背景色，使用nth-child伪类实现：

/* 偶数行背景色 */
.demo-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}
/* 鼠标悬停行高亮 */
.demo-table tbody tr:hover {
  background-color: #f0f7ff;
}

4. 完整样式代码整合

将上面的样式整合后，完整的CSS代码如下：

.demo-table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #e0e0e0;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
}
.demo-table th, .demo-table td {
  border: 1px solid #e0e0e0;
  padding: 12px 15px;
  text-align: left;
}
.demo-table th {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #333;
}
.demo-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}
.demo-table tbody tr:hover {
  background-color: #f0f7ff;
}

样式效果说明

应用上述样式后，表格会呈现以下效果：

• 表格边框合并为单边框，整体边框和单元格边框统一颜色
• 表头有浅灰色背景，文字加粗，和正文内容区分明显
• 偶数行有淡灰色背景，奇偶行对比清晰
• 鼠标悬停在某一行时，该行会有浅蓝色高亮效果
• 单元格内边距适中，文字不会紧贴边框，阅读体验更好

其他常用样式扩展

如果需要设置表格文字居中，可以将text-align属性值改为center；如果需要固定表格布局，可以添加table-layout: fixed属性，此时可以配合width给列设置固定宽度：

/* 固定表格布局，列宽由第一行决定 */
.demo-table {
  table-layout: fixed;
}
/* 设置第一列宽度为30% */
.demo-table th:nth-child(1), .demo-table td:nth-child(1) {
  width: 30%;
}
/* 设置第二列宽度为20% */
.demo-table th:nth-child(2), .demo-table td:nth-child(2) {
  width: 20%;
}
/* 剩余列自动分配宽度 */

CSSTable表格样式样式设置修改时间：2026-06-12 09:30:16