Ceryn

CSS 表格

6分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS 表格

table-layout | MDN

引入

HTML 表格负责组织表格数据，CSS 表格样式负责让表格更清晰、更容易阅读。

常见设置包括边框合并、单元格间距、宽度控制和表格布局方式。

正文

定义

定义

CSS 表格样式用于控制 <table>、<tr>、<th>、<td> 等表格元素的显示效果。

表格样式常用于后台列表、数据报表、价格表、课程表等场景。

基础结构

<table class="data-table">
  <tr>
    <th>姓名</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>90</td>
  </tr>
</table>
.data-table {
  width: 100%;
  border-collapse: collapse;
}
 
.data-table th,
.data-table td {
  padding: 12px;
  border: 1px solid #dddddd;
}

这个例子会生成一个宽度占满父元素、带有边框的表格。

常见属性

属性作用
border-collapse控制表格边框是否合并
border-spacing设置单元格之间的距离
table-layout设置表格列宽计算方式
caption-side设置表格标题位置
empty-cells控制空单元格是否显示边框和背景
vertical-align控制单元格内容垂直对齐

边框合并 border-collapse

border-collapse 用来控制表格相邻边框是否合并。

table {
  border-collapse: collapse;
}

常见值：

值作用
separate默认值，单元格边框分开显示
collapse相邻单元格边框合并成一条

做普通数据表格时，经常使用 border-collapse: collapse;。

这样表格边框不会出现双线，看起来更整齐。

单元格间距 border-spacing

border-spacing 用来设置单元格之间的距离。

table {
  border-collapse: separate;
  border-spacing: 8px;
}

注意：border-spacing 只在 border-collapse: separate; 时明显生效。

也可以分别设置水平和垂直间距。

table {
  border-collapse: separate;
  border-spacing: 8px 12px;
}

这里 8px 是水平方向间距，12px 是垂直方向间距。

表格布局 table-layout

table-layout 用来控制浏览器如何计算表格列宽。

table {
  table-layout: fixed;
  width: 100%;
}

常见值：

值作用
auto默认值，根据内容自动计算列宽
fixed按表格宽度和列宽更固定地分配

auto 更灵活，但内容很多时列宽可能不稳定。

fixed 更适合后台表格，列宽更容易控制。

处理过长内容

表格中有很长的文字时，可能会把表格撑开。

可以配合 table-layout: fixed; 和文本省略使用。

.data-table {
  width: 100%;
  table-layout: fixed;
}
 
.data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

这样单元格内容太长时，会显示省略号。

表头样式

.data-table th {
  background-color: #f3f4f6;
  font-weight: 600;
  text-align: left;
}

表头通常会使用背景色和加粗文字，方便和普通数据区分。

斑马纹表格

.data-table tr:nth-child(even) {
  background-color: #f9fafb;
}

斑马纹可以让横向阅读数据更轻松。

鼠标悬停效果

.data-table tr:hover {
  background-color: #eef2ff;
}

鼠标移到某一行时改变背景色，可以帮助用户确认正在查看哪一行。

例子

简单数据表格

<table class="user-table">
  <tr>
    <th>用户</th>
    <th>角色</th>
    <th>状态</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>管理员</td>
    <td>启用</td>
  </tr>
</table>
.user-table {
  width: 100%;
  border-collapse: collapse;
}
 
.user-table th,
.user-table td {
  padding: 10px 12px;
  border: 1px solid #dddddd;
  text-align: left;
}
 
.user-table th {
  background-color: #f3f4f6;
}

特点

  • 表格适合展示行列结构明显的数据
  • border-collapse: collapse; 可以让边框更整齐
  • border-spacing 用于控制单元格间距
  • table-layout: fixed; 可以让列宽更稳定
  • th 通常用于表头，样式可以和 td 区分

注意事项

  • 不要用表格做整体页面布局，现代页面布局更适合用 flex 或 grid
  • 表格内容较多时，要考虑横向滚动或响应式处理
  • 使用 border-spacing 时，不要同时期待 border-collapse: collapse; 生效
  • 数字类内容可以考虑右对齐，文本类内容通常左对齐

理解

CSS 表格样式的重点不是改变表格结构，而是让数据更容易看。

表格本身解决的是“数据按行列组织”的问题，CSS 负责让边框、间距、表头和行状态更清晰。

引出

表格适合数据展示，如果要做页面整体布局，可以继续学习 CSS Flexbox 和 CSS Grid。

关系图谱

反向链接