企业官网建设流程全解析

• UI组件
• 前端

导读

本文围绕 ng-zorro-antd 表格组件（nz-table）的「带边框」主题展开，系统讲解如何为表格添加完整边框线、仅外边框、自定义页头（Title）与页脚（Footer）四种能力。你将掌握nzBordered、nzOuterBordered、nzTitle、nzFooter四个输入属性的用法、默认值与全局配置方式，并理解其背后的组件模板与样式源码实现，从而在业务中快速搭建出带边框、带标题的正式数据报表。

1. 功能概述：一次配置，四类视觉增强

在 ng-zorro-antd 的表格 demo 体系中，bordered.md 对应的示例（bordered.ts）演示了表格的四种常用视觉能力：

• 完整边框（nzBordered）：为表格的每一行、每一列、表头与表尾单元格都绘制边框线；
• 仅外边框（nzOuterBordered）：只保留表格整体的外轮廓线，内部单元格不画线；
• 页头（nzTitle）：在表格主体上方渲染一行标题区域；
• 页脚（nzFooter）：在表格主体下方渲染一行页脚区域。

示例组件NzDemoTableBorderedComponent在模板中同时声明了两张表格：第一张使用nzBordered（全边框），第二张使用nzOuterBordered（外边框），两者都通过nzTitle="Header"与nzFooter="Footer"配置了标题与页脚，方便直观对比两种边框模式。

2. 最小可运行示例

以下代码完整还原自仓库示例 bordered.ts，可直接复制使用（依赖NzTableModule，通过imports: [NzTableModule]引入）：

import { Component } from '@angular/core'; import { NzTableModule } from 'ng-zorro-antd/table'; @Component({ selector: 'nz-demo-table-bordered', imports: [NzTableModule], template: ` <nz-table #borderedTable nzBordered nzFooter="Footer" nzTitle="Header" [nzData]="dataSet"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> </thead> <tbody> @for (data of borderedTable.data; track data) { <tr> <td>{{ data.name }}</td> <td>{{ data.age }}</td> <td>{{ data.address }}</td> </tr> } </tbody> </nz-table> <nz-table #outBordered nzOuterBordered nzFooter="Footer" nzTitle="Header" [nzData]="dataSet"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> </thead> <tbody> @for (data of outBordered.data; track data) { <tr> <td>{{ data.name }}</td> <td>{{ data.age }}</td> <td>{{ data.address }}</td> </tr> } </tbody> </nz-table> ` }) export class NzDemoTableBorderedComponent { dataSet = [ { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, { name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' } ]; }

要点说明：

• 表格声明了#borderedTable/#outBordered模板引用变量，tbody内通过borderedTable.data/outBordered.data遍历数据——当nzData传入且开启前端分页（nzFrontPagination默认开启）时，nz-table的data属性返回当前页的数据子集；
• @for (data of borderedTable.data; track data)为 Angular 新版控制流语法，track提供变更检测追踪键；
• nzTitle、nzFooter在模板中直接以字符串字面量形式绑定（nzTitle="Header"），也可通过属性绑定传入TemplateRef实现完全自定义渲染（详见第 4 节）。

3. 边框模式详解：nzBordered 与 nzOuterBordered

3.1 nzBordered：完整边框

nzBordered控制是否显示表格的所有边框（单元格之间、表头、表体、表尾）。设置后，组件根容器会被加上ant-table-bordered样式类，Ant Design 主题中的表格边框规则随之生效。

表格参数对照可参见官方 API 文档 components/table/doc/index.en-US.md 与 components/table/doc/index.zh-CN.md。

3.2 nzOuterBordered：仅外边框

nzOuterBordered只绘制表格整体外轮廓（标题、表体容器、页脚的外框），内部单元格不画分隔线，适合希望保持清爽行列间距、又需要明确区块边界的场景。

3.3 源码视角：两个属性的底层实现

在组件实现 table.component.ts 中可以看到两个属性均声明为@Input：

@Input({ transform: booleanAttribute }) nzOuterBordered = false; @Input({ transform: booleanAttribute }) @WithConfig() nzBordered: boolean = false;

由此可以确认三个实现细节：

1. booleanAttribute转换：两个属性都允许以纯布尔属性形式使用（如nzBordered、nzOuterBordered），Angular 会自动将空属性值转为true；
2. @WithConfig()装饰器：nzBordered支持通过全局配置（NZ_CONFIG，模块键nzTable）统一设置默认值，适用于"全站表格默认带边框"的规范化场景；而nzOuterBordered不支持全局配置；
3. 类名映射逻辑（模板第 76-77 行）：

[class.ant-table-bordered]="nzBordered" [class.nz-table-out-bordered]="nzOuterBordered && !nzBordered"

当nzBordered为true时，整个表格容器挂上ant-table-bordered，由 Ant Design 主题样式绘制完整边框；nzOuterBordered单独生效时，容器挂上自定义类nz-table-out-bordered。当两者同时为true时，nzBordered优先级更高（nzOuterBordered && !nzBordered），即只表现完整边框。

nz-table-out-bordered的具体样式定义位于 patch.less：

.nz-table-out-bordered { > .@{table-prefix-cls}-title { border: @table-border; border-bottom: 0; } > .@{table-prefix-cls}-container { border: @table-border; border-bottom: 0; } > .@{table-prefix-cls}-footer { border: @table-border; border-top: 0; } }

从这段样式可以看出外边框的构成方式：标题区（ant-table-title）、表体容器（ant-table-container）与页脚区（ant-table-footer）自上而下分别描边，相邻区域共享边线（标题/容器底部边线置 0、页脚顶部边线置 0），最终在视觉上连成一个完整的外框。这也解释了为什么页头与页脚是外边框视觉的一部分——外边框模式天然依赖标题与页脚结构的存在。

4. 页头与页脚：nzTitle 与 nzFooter

4.1 参数说明

两者都支持两种传入方式：

• 字符串：nzTitle="Header"/nzFooter="Footer"，直接以文本渲染；
• 模板引用：传入TemplateRef<void>，可放入任意 Angular 模板内容（按钮、统计信息、富文本等）。

4.2 模板引用示例

// 组件模板中定义页头模板 <ng-template #titleTpl> <span>客户信息报表</span> <nz-tag nzColor="blue">共 {{ dataSet.length }} 条</nz-tag> </ng-template> <nz-table nzBordered [nzData]="dataSet" [nzTitle]="titleTpl" [nzFooter]="'数据更新时间：2026-09-28'"> <!-- thead / tbody 略 --> </nz-table>

nzTitle/nzFooter也可与nzOuterBordered组合，实现"外边框 + 自定义标题/页脚"的报表外观。

4.3 渲染原理：NzTableTitleFooterComponent

在 table.component.ts 的模板中，页头与页脚由统一的nz-table-title-footer组件承载：

@if (nzTitle) { <nz-table-title-footer [title]="nzTitle" /> } <!-- 表体容器：nz-table-inner-scroll 或 nz-table-inner-default --> @if (nzFooter) { <nz-table-title-footer [footer]="nzFooter" /> }

即：标题区渲染在表体容器之前，页脚区渲染在表体容器之后，各自仅在对应输入非空时才创建。nz-table-title-footer的实现见 title-footer.component.ts：

template: ` <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container> <ng-container *nzStringTemplateOutlet="footer">{{ footer }}</ng-container> `, host: { '[class.ant-table-title]': `title !== null`, '[class.ant-table-footer]': `footer !== null` }

核心机制：

• nzStringTemplateOutlet：来自ng-zorro-antd/core/outlet的字符串/模板统一出口指令。若传入值是字符串则直接插值文本，若是TemplateRef则渲染模板，从而让nzTitle/nzFooter单一属性同时支持两种形态；
• 宿主类名切换：标题存在时挂ant-table-title，页脚存在时挂ant-table-footer，这两个类正是 Ant Design 主题中标题/页脚样式（背景色、内边距、字号等）的作用点，也是上一节外边框样式锚定的对象。

5. 进阶组合：边框 + 固定表头/列、尺寸、汇总行

带边框模式并不是孤立特性，它与表格其他能力天然兼容。仓库中相关 demo 展示了常见组合方式：

• 固定表头/列：fixed-columns-header.md、fixed-columns.md示例（见 components/table/demo）展示了nzScroll与边框同时使用时，虚拟滚动区域内的单元格边框在 patch.less 中有专门处理（如ant-table-bordered下固定右侧列的补边、table-border在thead/tbody/tfoot单元格上的border-inline-end），确保横向滚动时边框不丢失；
• 尺寸（compact）：size.md示例可与nzBordered组合，边框模式下middle/small尺寸会同步调整单元格内边距，相关兼容样式同样在 patch.less 的nz-table-out-bordered与ant-table-bordered分支中体现；
• 汇总行：summary.md示例中nzSummary汇总行位于表体之后，与nzFooter页脚区域可共存，常用于"合计行 + 说明页脚"的报表布局。

6. 全局默认配置（可选）

由于nzBordered带有@WithConfig()标记（模块键nzTable），可以在应用全局配置中为所有表格统一开启边框，避免每个组件重复书写：

import { NZ_CONFIG, NzConfig } from 'ng-zorro-antd/core/config'; const ngZorroConfig: NzConfig = { table: { nzBordered: true // 可同时配置 nzSize: 'middle' 等其他 table 全局项 } }; // 在应用或模块级 providers 中提供 providers: [{ provide: NZ_CONFIG, useValue: ngZorroConfig }]

全局配置机制详见仓库文档 global-config.en-US.md / global-config.zh-CN.md。注意nzOuterBordered不支持全局配置，需要在每个nz-table上显式声明。

7. 小结

通过本篇文章，你已掌握 ng-zorro-antd 表格「带边框、页头、页脚」的完整用法：

其中nzOuterBordered的视觉构成依赖标题与页脚结构（见 patch.less），两者同时开启时nzBordered优先。结合 bordered.ts 的完整示例与 table.component.ts 的源码实现，你可以根据业务需要自由组合出全边框、外边框、自定义标题/页脚等多种报表形态。

• UI组件
• 前端