企业官网建设流程全解析

CSS 表格样式是我觉得整个前端里最容易被低估的一块。入门门槛确实很低，给<table>加个边框、给<td>加点 padding，再设一个背景色，看起来就像模像样；可一旦表格里的数据多起来、列数多起来、还需要在手机和打印机上都保持体面，问题就接踵而至。很多人以为表格样式就是 border 和 padding 两件事，真到维护一个字段多、列数多、还要适配各种屏幕的后台系统时，才发现表格渲染规则和普通 div 完全不是一套逻辑，每个“看着没问题”的布局都会在某个角落翻车。

这篇文章我想把表格样式从头到尾捋一遍，从浏览器给<table>的默认行为，到基础样式、斑马纹、表头固定、列宽控制、响应式重排、交互细节、一直到打印适配，把我这些年实际改表格踩过的坑和最后沉淀下来的写法一起讲清楚。不管你是刚接触 CSS 的初学者，还是已经在维护后台页面、想查漏补缺的中级开发者，都能在里面找到能直接抄走的东西。

1. 表格样式最容易被低估的三个底层差异

1.1 table 有自己的显示模型：先别看 border，先看 display

表格和普通元素最大的区别，是浏览器的渲染引擎给 table 家族准备了一套独立的盒模型规则。你写一个<div>，它默认 display: block，宽高、margin、padding 都好预测；但<table>默认是 display: table，内部还会隐式生成 anonymous table-row、table-cell 等盒子。这意味着两件事：第一，直接给<tr>设置 margin 或者 padding 基本是无效的，行不喜欢被“挤”开；第二，如果有人在合法的表格结构里塞了不合适的标签，浏览器会在渲染时悄悄补出缺失的行和单元格，最后你看到的布局可能和 HTML 源码完全对不上。

这个差异最常见的影响是“为什么我的 tr 加了个 height，内容多一点就撑破了”。因为行的实际高度是由单元格内容决定的，height 在表格里更像一个“建议值”，内容一旦超出就会把行撑高。类似的问题还有：给<td>设置 margin 也不会生效，单元格之间的间距要靠 border-spacing，并且只在 border-collapse: separate 的模式下才起作用。想明白这一点，遇到很多表格怪象时就能少走弯路。

1.2 border-collapse 一行代码改变整个宽度算法

border-collapse 是表格样式的分水岭。默认情况下，table 处于 border-collapse: separate 状态，每个单元格都有自己的边框，单元格之间还有大约 2px 的 border-spacing。这时表格的总宽度等于列宽之和加所有间距，边框还会占据额外空间，很容易出现“表格总宽超过容器”的情况。一旦改成 border-collapse: collapse，相邻单元格的边框会合并成一条，间距也被移除，整个宽度计算更接近普通元素。

但别急着高兴。collapse 模式虽然省心，后面的坑也不少：我们要做 sticky 表头时，合并后的边框无法跟随 sticky 元素一起移动；要做圆角表格时，collapse 模式会直接让圆角看不见；用半透明背景做斑马纹时，背景会在边框合并处出现缝隙。所以“用 collapse 统一一切”并不是唯一正解，后面第 4 章我会专门展开这一组连锁反应。

1.3 td 默认 vertical-align: middle，文字容易“飘”在中间

普通块级元素里的文字默认靠上对齐，而单元格默认是 vertical-align: middle。这个差异是很多表格“看起来像浏览器默认老样式”的元凶之一：明明加了 padding，文字和边框之间上下距离还是不对称；明明列高不一样，文字却各自悬在单元格中间，整行读起来很散。

我在代码里一般会显式写上vertical-align: middle，配合text-align: left，让内容稳稳落在单元格中段；表头如果要做视觉强调，再单独覆盖 vertical-align。养成这个习惯之后，单元格内容在列高变化时不会自己“漂移”，视觉稳定很多。尤其是后面要做 hover 高亮和斑马纹时，所有单元格的背景范围取决于自身高度，对齐逻辑统一了，看起来才是一条完整的横带。

2. 从零构建一版干净好用的基础表格

2.1 先重置浏览器默认的一堆“老古董”

浏览器给 table、th、td 的默认样式非常保守，几乎相当于上世纪“表格布局即页面布局”时代的遗留产物。写表格样式的第一步，通常是把这些默认表现全部清零：把 border-spacing 归零、单元格 padding 归零、给 table 设置 width: 100%，再统一字体族、字号和行高，让表格和页面其它部分用同一套排版体系。

我的基础写法是这样的：

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; font-family: inherit; line-height: 1.5; color: #1f2937; } .data-table th, .data-table td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid #e5e7eb; }

这里把 text-align 统一成 left，是因为后台表格绝大多数场景是左对齐文字、左对齐短数字；如果你处理的是金额、百分比这类需要纵向比较的数字，再单独给列设置 right 对齐即可。建议不要在每个业务表格里重复一圈“每个单元格写一样的边框声明”，用这样的基础样式兜底，再按列去覆盖，代码会清爽很多。

2.2 用 padding 撑行高，而不是用 height

新手最常犯的错误，是给<tr>或<td>设一个固定 height，试图精确控制行高。这种做法一旦遇到换行内容就显得很僵硬，而且不同浏览器对表格行高度算法的处理并不完全一致。正确的做法是把垂直留白全交给 padding：上下 padding 决定了行的最小高度，内容换行时行会自动伸展；只要所有单元格的 padding 一致，相邻列的文字就能保持在同一视觉基线上。

我在普通项目里默认用12px 16px这组值，小屏下会缩到8px 12px。数据量很大的列表，我会把 padding 再降一档，比如8px 14px，让单位面积呈现更多内容；如果表格是给用户做阅读性较强的报表，就放大到16px 20px。这组参数可以根据具体产品调性调整，但核心原则不变：行高交给 padding，而不是 height。

2.3 表头与表格底部怎么收尾

表头是整张表格视觉层次的起点。我常用很浅的灰底加一条更明显的底部边框来区分字段区，字体用比正文略重的 600，颜色比正文深一点。表头的底部边框可以比行分隔线更明显，比如#d1d5db，这样用户扫读时第一眼就能抓住“字段线”的位置。表格底部不需要额外强调，最后一行下面保留一条 border-bottom 就是自然收尾；如果表格外层套了卡片容器，就让容器的 border 和圆角来承担整体边界。

.data-table thead th { background: #f9fafb; border-bottom: 1px solid #d1d5db; font-weight: 600; color: #374151; }

顺便提醒一句：不要把每个单元格都围上完整的四边 border，那样会非常像老式网页。现代表格更常用的手法是“行分隔线”，每个单元格只保留底部边框，再用容器的边框或阴影做外框收束。少即是多，这条在表格样式里尤其明显。

2.4 对齐规则：文本、数字与操作列各归其位

基础表格要真正好用，对齐比颜色更重要。中文后台表格里我基本遵循一套约定：姓名、备注、描述这类文本左对齐；金额、数量、百分比这类数字右对齐，因为大量数字在表格里是竖着比较的，右对齐能让小数点落在同一条垂直线上；操作列（编辑、删除、查看）居中对齐，按钮多时也可以左对齐。具体可以通过在 th 或 td 上加 class 来控制：

.data-table .num { text-align: right; font-variant-numeric: tabular-nums; } .data-table .ops { text-align: center; }

font-variant-numeric: tabular-nums是一个很容易被忽略的小细节：它让数字按等宽形式渲染，金额列在滚动态和静态之间切换时不会出现数字宽度抖动。如果你用表格展示订单号、实验数据、价格分数，这行代码几乎等于白拿的优化。

3. 斑马纹与分组条纹：隔行变色的几种实践

3.1 最稳妥的写法：nth-child 放在 tbody 行上

斑马纹是表格里最常用的视觉辅助线，能帮助用户在长行里快速对齐左右两列的数据。最直接的写法是：

.data-table tbody tr:nth-child(even) td { background: #f8fafc; }

注意我特意写成了tbody tr，而不是直接写tr。因为 nth-child 的计数是相对父元素的，如果直接写.data-table tr:nth-child(even)，计数范围包含 thead 里的所有行，表头行会把数据行的“奇偶性”整个带偏。用 tbody 限定之后，无论表头有几行，数据行的条纹计数都是从第一条重新开始的。这是斑马纹上最常见的第一道坑。

3.2 分组表格里条纹会乱：用独立类名接管

在报表里经常出现“分组表”，比如按部门分组、一组下面挂若干条明细。此时用 nth-child(even) 会导致分组行和明细行之间的颜色关系混乱——你可能希望每一组内部单独隔行变色，而不是整个表格全局每隔一行变色。我在这里踩过不少次坑，最后总结出一个规律：只要表格里出现 colspan、rowspan 或跨行分组，就不要寄希望于 nth-child 能自动算出想要的条纹，老老实实给行加 class 更可靠。

例如用.row-odd和.row-even来控制，后台渲染循环里通过索引取模生成行号 class。代码看起来多一行，但换到任何复杂分组结构都不怕。真正复杂的分组表，我甚至建议放弃底色条纹，改用“组标题行 + 明细行”的视觉结构：组标题行用半灰色背景，明细行完全不加底色，靠缩进和左侧竖线区分层级。这样读起来比条纹更清晰，也更像现代设计系统里的做法。

3.3 条纹与 hover 高亮打架：优先级不是唯一问题

斑马纹通常会和 hover 高亮并存。如果 hover 样式优先级不够，鼠标移过时行背景根本没有变化；如果优先级太高，条纹又完全消失了。我看过不少同事把 hover 写成.data-table tr:hover，结果斑马纹作用在 td 上的背景把它盖住，整行看起来纹丝不动。最常见的修复方式是把 hover 也作用到单元格上，让背景层级一致：

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

如果页面里其它样式比较复杂，还可以用tbody tr:nth-child(even):hover td来提高一点优先级。不过工程上我不建议用一堆优先级诡计，更推荐统一定义行状态类：.row:hover td, .row.active td共用同一套背景色变量，这样条纹和选中态都能灵活叠加。

说话视觉细节：hover 高亮时，背景色要和原来的行背景有足够对比度，又要保留整行连续性。我的经验是把 hover 色设成半透明，比如rgba(59, 130, 246, 0.08)，叠加在原来的灰白底色上，既能兼容条纹行，也能兼容普通行，眼睛会很舒服。

4. 表头吸顶与左列冻结：sticky 定位的两个现实问题

4.1 滚动容器没配对，吸顶表头全场失灵

position: sticky 是现代表格实现“表头吸顶”的常用手段。原理不复杂：元素在滚动到指定位置之前保持普通定位，到了阈值之后“粘”在容器边缘。要让表头真正吸顶，第一个先决条件是祖先链上必须有一个滚动容器，并且这个容器的尺寸是有限的。很多人把表格直接放在页面体里，期望浏览器窗口滚动时表头固定在上方——这个场景其实也成立，但前提是祖先链上不能有 overflow: hidden / auto / scroll 截断滚动上下文。

在我实际维护的某后台项目里，表格外面套了多层卡片，某个祖先 div 为了圆角设置了 overflow: hidden，结果 sticky 全部失效。排查方法很简单：从 thead 开始，一路向上看每个祖先节点的 overflow 和滚动位置，确认滚动到底发生在哪个容器上。最省心的做法是给表格单独包一个.table-scroll，高度或 max-height 固定，overflow: auto，让滚动上下文完全可控。

.table-scroll { max-height: 480px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; } .table-scroll thead th { position: sticky; top: 0; background: #f9fafb; z-index: 2; }

这段代码里，背景色必不可少。sticky 元素即使“吸顶”，自身背景仍然是透明的，如果没有 backgroundColor，滚动经过的数据会穿透表头显示出来，你会看到一堆文字叠在表头上。另一个问题是 z-index：如果表格里还有冻结列、合并单元格或者弹层，表头层级不够会被别的元素盖住，顺手给 thead th 一个明确的 z-index 是很有必要的防御。

4.2 border-collapse: collapse 和 sticky 的兼容性冲突

这一节是全篇最容易被跳过、但最值得细看的部分。border-collapse: collapse 虽然能让边框合并、宽度规整，但会让 sticky 表头在某些浏览器里“发飘”，原因在于合并后的边框无法跟随 sticky 元素做位置调整，表头底部的线会在滚动时消失或错位。我实际测下来的结论是：一旦需要 sticky 表头，就把外层表格改成 border-collapse: separate，配合 border-spacing: 0，然后让每个单元格自己画底部或右侧边框。

.sticky-table { width: 100%; border-collapse: separate; border-spacing: 0; } .sticky-table th, .sticky-table td { border-bottom: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; } .sticky-table th { position: sticky; top: 0; background: #f9fafb; z-index: 2; }

这样单元格之间视觉上仍然是一条连续的线，但每条线都属于具体的单元格，sticky 移动时能保持对齐。需要注意第一行 th 的底部边框如果也想跟着吸顶，就把border-bottom放在 th 而不是 tr 上。这个方案在 Chrome、Firefox、Safari 的现代版本里都比较稳，是我目前在做长表格时的默认配置。

4.3 双行表头和左列冻结：两个方向的 sticky 组合

双行表头，例如第一层放年份、第二层放季度，要吸顶时的核心是给每一行分别指定 top 值。第一行 top: 0；第二行如果固定在 40px 高，top 就设成 40px。如果第一行高度不固定，可以给第一行设定明确的 height，或者把第二行 top 用 CSS 变量维护。表头行高一般很稳定，我通常直接给数值，必要时微调。

同时固定左侧操作列或序号列时，被冻结的单元格需要position: sticky; left: 0，并且必须有独立于普通内容的背景色。这里要处理三层 z-index：普通 th 的吸顶 z-index: 2；普通 td 的冻结列 z-index: 1；左上角那个同时需要吸顶和冻结的角落单元格，两个方向都设置 sticky，z-index 提到 3。我在做财务明细表时用过这种组合，关键是不但要给冻结列设背景，还要考虑它右侧是否要加一条分隔阴影，否则数据贴着冻结列滚过去，眼睛很难跟上。阴影可以用box-shadow: 2px 0 4px rgba(0,0,0,0.06)直接挂到冻结单元格上。

5. 列宽控制：table-layout、min-width 与长文本溢出的三方博弈

5.1 table-layout 决定谁是列宽的“爸爸”

表格列宽的控制是很多新手最头疼的地方，因为浏览器默认采用的 table-layout: auto 算法，会把整张表的宽度交给内容和单元格性质共同决定。你写的 width 只是一个“期望值”，最终分配可能完全不是那么回事。auto 模式适合字段少、内容长短变化不大的展示型表格，它能让列宽自适应内容，很省心。可一旦出现超长 URL、长英文单词，或者某个单元格内容把列撑得奇宽，整表就会变形。

table-layout: fixed 则完全不同：列宽主要由第一行单元格或 colgroup 里的 col 宽度决定，后续行内容再长，列的宽度也不会被强行撑开。它的优点是布局稳定、可预测，尤其在渲染大量数据的列表里能避免“渲染完成后的宽度跳动”。代价是内容超长时不会自动扩展列宽，而是溢出，所以必须搭配换行处理。我的一般选择是：展示型、内容短的表格用 auto；数据密度高、列数多、需要严格对齐的长列表用 fixed。

下面是我常用的一组对比：

5.2 百分比宽度被内容撑破的典型场景

看一个典型的“撑破”场景。有三列，分别设置 width: 30%、40%、30%，但第一列里放了一个不能换行的订单号 “ORD-20240415-001”，在 auto 模式下这一列会被撑宽，其它列被迫压缩，百分比完全失效。解决思路分两步：第一步，给 table 设置table-layout: fixed；第二步，允许长内容在单元格内换行。

.order-table { width: 100%; table-layout: fixed; } .order-table td { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

这样设置后，无论第一列内容多长，列宽都会严格按第一行 th 的 width 分配；文本会在任意字符或单词边界换行，虽然个别断行位置不优雅，但至少表格整体轮廓不会崩。注意 overflow-wrap: anywhere 和 overflow-wrap: break-word 的差别：前者把软包装机会放在任意位置，即使没有合法断点也断；后者只在没有其它办法时才断。长数字、长链接用 anywhere 更省心。

5.3 想限最小宽度，别只给 table 一个 min-width

移动端适配或复杂报表里，有时我们希望“列可以小，但别太小，否则没法读”。很多人会顺手给 table 写一个min-width: 800px，然后配合某个横向滚动容器。这个思路本身没问题，但要注意 min-width 作用在 table 上的表现和普通元素不太一样：它只影响表格整体最小宽度，不会单独约束每一列。如果你希望某一列至少 160px，那就把 min-width 写到这一列的 th 或 colgroup 上。

实践里我更推荐用 colgroup 集中控制列宽：

<colgroup> <col style="width: 10%; min-width: 80px;" /> <col style="width: 30%; min-width: 200px;" /> <col style="width: 20%; min-width: 140px;" /> <col style="width: 40%;" /> </colgroup>

把列的宽度策略集中在一处，后续维护时就不用去翻几十个 td。百分比负责横向弹性，min-width 守住可读底线，再配合 fixed 布局，列宽这一层就基本可控了。我在一个字段特别多的模拟项目里，用这套结构把 12 列的报表整理得肉眼可见地整齐，后面要调整比例也只是在 colgroup 里微调数字，完全不用碰业务代码。

6. 小屏适配：不是所有表格都该横向滑动

6.1 最简单但有效的兜底方案：横向滚动容器

移动端表格的第一反应通常是给表格套一个横向滚动容器：

<div class="table-scroll-x"> <table class="data-table">...</table> </div>

.table-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

这个方案非常快，适合列数多、必须保留全部列完整语义、用户需要在表格内部横向对照数据的场景。但我不建议把它当成唯一方案：手机屏幕宽度有限，横滑表格时用户很容易丢失“当前在读哪一行”的上下文；长表格行高又高时，左右滑动的手势还会和页面纵向滚动产生冲突。所以横向滚动适合“低频查看的数据面板”，不太适合高频逐行阅读的移动端页面。

6.2 信息卡重排：把每一行变成一张小卡片

比横滑更贴近移动阅读习惯的做法，是把表格重排成卡片。核心思路是：小屏下隐藏表头，每个 tr 独立成卡；td 需要携带><td>@media (max-width: 640px) { .data-table thead { display: none; } .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; } .data-table tr { margin-bottom: 12px; padding: 8px 0; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; } .data-table td { padding: 10px 16px; text-align: right; } .data-table td::before { content: attr(data-label); float: left; font-weight: 600; color: #6b7280; } }

这样每一行数据就变成一个上下两段的卡片：左边字段名、右边字段值。float: left在这里是一种偏老派但非常稳的布局方式，现代写法也可以用 flex 或 grid，但在 td 内部做两栏，float 配合 clear 反而是最不容易踩 flex 换行问题的方案。实际项目里还可以给部分不需要在卡片中展示的列加display: none，例如操作列可以单独定到卡片底部。

6.3 用 CSS Grid 做“分栏卡片”

如果你不只是想要一列卡片，而是希望移动端把一行数据排成两列甚至三列的信息区，可以用 CSS Grid 重排。这里已经不再是“表格”，而是纯粹利用 display 把 tbody、tr、td 视觉上重构：

@media (max-width: 640px) { .data-table, .data-table tbody { display: block; } .data-table tr { display: grid; grid-template-columns: 1fr 2fr; gap: 12px 16px; margin-bottom: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; } .data-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 0; } .data-table td::before { content: attr(data-label); font-weight: 600; color: #6b7280; } }

用 Grid 可以控制某些字段占一整行，比如“备注”这种长文本列，给 td 加 class 后设grid-column: 1 / -1。每个卡片的内部结构更灵活，适合字段数量相对固定的场景。但要敲个警钟：如果表格的分页、排序、选择行、批量操作都很重，改成卡片后这些交互会变得很难摆放。我的建议是尽早明确移动端到底是“数据卡”还是“数据表”，不要等代码写一半再反复横跳。

7. 交互细节与无障碍：hover、焦点、空状态

7.1 整行高亮与操作列：别让 hover 只作用在单个格子上

后台表格里，用户经常需要把鼠标放在某一行上获得上下文，比如点击行内某个按钮时看清整行数据。此时要保证整个 tr 都能高亮，而不是只有鼠标所在的 td 变色。做法是把 hover 选择器落在 tr 上，但背景落在 td 上，这一点前面已经写过，不重复。另一个细节是，行高亮不要干扰单元格里的按钮和链接背景，否则视觉重点会被抢走；可以加一个非常短的transition: background-color .12s ease，但别过渡太久，否则用户会觉得表格“肉肉的”，不干脆。

点击区域同样重要。操作列里的编辑按钮如果做成了 24px 高的小链接，在触屏上很难点。我一般会给操作按钮设置min-height: 32px、上下 padding 6px，按钮与按钮之间至少保留 8px 间距。表格行本身如果需要可点击，不建议给整行绑定 click，而是用“行内主操作按钮 + 行 hover 底色”一起表达，这样既照顾鼠标用户，也照顾 Tab 键导航的键盘用户。

7.2 焦点可见性：键盘用户也需要知道自己在哪

表格的无障碍经常被忽略，但键盘用户访问长表格时，焦点样式就是他们的鼠标。默认的 outline 在表格单元格上可能很弱，我会用 :focus-visible 强化：

.data-table td:focus-within, .data-table th:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

td 内部有链接、按钮、输入框时，用 focus-within 把焦点轮廓扩大到一个单元格，用户扫读时能明确知道当前操作落在哪一列。注意不要用 :focus 给所有元素都加样式，那样鼠标点击时也会出现蓝色外框，视觉上很吵；:focus-visible 只在键盘导航时生效，是更合理的选择。

7.3 空状态、加载态与排序指示：小样式影响使用信心

一张表格可能因为过滤条件返回 0 行。空状态不应该只是一个空 tbody，建议在 tbody 里输出一行：

<tr><td colspan="6" class="empty-state">暂无数据</td></tr>

然后把空态样式做到位：

.empty-state { padding: 48px 16px; text-align: center; color: #9ca3af; font-size: 14px; }

colspan 要等于表格最大列数，否则空行不会铺满整表。加载态则是另一个容易出问题的地方：如果在 tbody 里渲染骨架行，注意给骨架单元格设置浅色占位背景，并避免和斑马纹互相干扰。排序指示也可以完全用 CSS 完成，在可排序列后面画一个三角号，配合方向 class 切换：

th.sortable::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; border: 4px solid transparent; vertical-align: middle; } th.sortable.asc::after { border-top: 0; border-bottom-color: #4f46e5; } th.sortable.desc::after { border-bottom: 0; border-top-color: #4f46e5; }

这些小样式单看都不起眼，但组合起来，整张表格的可用性和“精致感”会立刻差一个档次。

8. 复杂表头、合并单元格与打印适配

8.1 colspan/rowspan 的边框与条纹处理

复杂报表里，colspan 和 rowspan 能把表头拼成矩阵，也能让数据单元格跨行跨列。样式上的首要问题是：合并单元格的边框规则是按照合并区域的外轮廓走，内部被覆盖的行列不会重复画线，这本来是正确行为，但和斑马纹叠加时就很难看。合并单元格本身占据了多个原始行格，tr:nth-child 的奇偶计数和视觉位置脱节，条纹会出现断层。处理方式有两条路：要么给合并单元格单独设置背景，不接受条纹干扰；要么在构建 HTML 时就预先设计行号规律，让合并场景下行号也稳定。

表头合并还会带来另一个问题——文字对齐。跨多列的表头一般需要居中，但单元格内容仍要左对齐；如果 th 写死了左对齐，跨列表头看起来就是歪的。我习惯在合并表头 th 上加一个.th-center类单独覆盖，同时保证合并 th 的高度一致，否则后面做双行 sticky 表头时，第二行的 top 值又要重新算。这个看起来很琐碎，但复杂报表里把表头结构理顺，相当于给后续所有表格能力打好了底。

8.2 打印时表头重复、行不截断、边框不丢

打印表格是后台系统里很常见的需求，比如打印订单明细、打印报告。浏览器在分页打印时，默认对 table 的处理经常不合预期：表头未必会在每一页重复，某一行可能被直接截断在页面交界处，背景色还往往被忽略。第一批需要加的打印样式是：

@media print { .data-table thead { display: table-header-group; } .data-table tr { break-inside: avoid; page-break-inside: avoid; } .data-table th, .data-table td { border: 1px solid #000 !important; } }

display: table-header-group决定的是“每一页都重复表头”，不要省略。break-inside: avoid则保证某一行不会从中间裂成两半——如果一页放不下倒也可以整体跳到下一页，但至少比读到一半断掉强。border: 1px solid #000 !important是为了应对一些浏览器在打印时弱化浅色边框，打印版表格里黑线才是视觉上的硬边界。

8.3 打印背景色要单独开启

如果想在打印时保留斑马纹、表头底色、预警高亮这些视觉信息，光写背景色不够，很多浏览器默认忽略网页背景。需要额外设置：

@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

不过我要提醒一句：打印场景里，背景色只是辅助，真正重要的是边框、字号和对比度。如果你发现打印出来的颜色很淡，先检查打印预览软件的“背景图形”开关有没有打开，再回头看 CSS，不要只靠代码对抗用户设置。还有一个实用小技巧：打印样式里把字号适当缩小、padding 减半，让表格在 A4 纸上有更宽的可用宽度，这通常比把页面方向改成横向更省事。

最后分享一个我一直保留的习惯：写表格样式之前，先问自己四个问题——这个表格数据量大不大？列数多不多？需不需要横滑或吸顶？会不会被打印？这四个答案基本决定了表格样式的底层架构。其它都是点上功夫，真正让人头疼的往往是没想清楚这些前提就动手。表格样式入门不难，但想做得干净、稳定、经得起各种屏幕和各种内容折腾，确实要积累不少细节，希望这篇能帮你省掉一部分踩坑时间。