13 / 20

表格布局 | 自在学

表格布局

在前端开发领域，表格一直以其强大的数据组织能力被广泛使用。但谈到CSS实现的表格布局，它所涵盖的远不止把数据简单排列成网格，更是涉及一套浏览器用来解析和渲染表格元素的复杂体系。仅从表面结构理解远远不够，深入其处理逻辑才能把握其本质。

想象你正在构建一套在线表格系统。对于实际业务而言，往往会遇到各种特殊需求——比如某些单元格要横跨多行或多列、单元格的边框需要整体合并、甚至内容需要严格对齐……如果直接用HTML的<table>结构，浏览器会帮你处理好这些细节。但在CSS层面，打破原有的标签结构，开发者可以给任意元素赋予表格式的表现形式，相应地也要手动对这些规则和行为加以定义和把控。

表格布局

CSS的表格布局模型最独特的地方在于其元素之间的高度“关联性”：例如，同一行的所有单元格总是保持相同高度，同一列的单元格宽度永远同步调整。这种联动是表格布局和传统块级、内联、弹性布局最大区别，也是表格用于数据展示时最有力的功能来源。

当然，强大的能力必然意味着复杂的规则。围绕表格布局，CSS规范制定了针对层级、结构、尺寸、对齐、边框等诸多细致的标准，有些源自Web早期遗留下来的兼容性考虑。现代布局方式如Flexbox和Grid也很难完全复刻这种“同步关联”机制，因此CSS表格布局至今有其不可替代性。

实验室

表格格式化

在给表格元素添加样式前，首先要理解浏览器如何将HTML或其它标记语言中各个部分组装成一整个表格。这一步骤被称为表格格式化（Table Formatting），它是表格最终表现的基石，并不与实际渲染的样式完全等价。

表格的网格基础

CSS构建表格时，并非完全依赖HTML层级关系，而是在视觉上创建一套行列网格系统。可以把表格理解成被一组水平和垂直的虚拟网格线划分的矩形区域，每一条网格线的交点定义了一个格子（cell slot），这些格子构成了单元格的分布基础。虽然这些虚线不会在页面上真正显示，但它们是CSS算法计算布局的依据。

举例而言，一个基础的2x2表格，由四条直线划分为四个格子。每个格子映射着文档中的一个单元格。随着表格的复杂化（如出现合并单元格的情况），格子的形状与覆盖区间则更为多变，每一个表格单元格仍需严格与其所在的网格边对齐。这套网格和映射关系，使得CSS表格模型比起普通块状结构更加贴合几何组合的本质。

表格排列的基础遵循

CSS在表格的排列逻辑上，设定了具体且严密的规则，旨在保障从内容到结构的有序和一致。

行的分布：每一行（如<tr>）都会占据表格自上而下的完整水平空间，顺序与源文件保持一致。特定类型的行如表头、表尾可分别固定于表格最顶端和最底端。
行组和列组：行组（如<tbody>, <thead>, <tfoot>)包裹其中的所有行，划分明确边界。列与列组（如<col>, <colgroup>）在视觉上从左到右并排，首列始终处于最左侧。
合并单元格的处理：无论单元格跨越多少行/列，都被视为一个最大化“贴左上角”的矩形，不会与其他单元格发生重叠。同一行中靠前的单元格优先定位，有利于解决布局冲突。
边界限制：所有单元格都不能超出它所属表格或行组的底部边界。如果有跨越导致超界，系统会自动压缩或调整单元格以适配容器。
跨行列布局留白：对于合并单元格的具体渲染方式，CSS标准并不强行规定，而是交由具体标记语言（如HTML、XML）自身决策。

CSS表格模型之所以能高效应对复杂数据布局，正是由于其精确到单元格边界的“几何体系结构”，但这也对开发者的结构设计能力提出了更高要求。

表格显示模式的指定

在HTML文档里，我们通常用<table>、<tr>、<td>等词义鲜明的标签来描述表格结构。但在XML、JSON等自定义标记语言中，没有这些专用标签，怎么定义对应的表格语义？这时候就要用到CSS的display属性为元素指定表格式的角色。 CSS内置一组专用于表格布局的display取值，使得任意元素都可以表现为表格的各种组成单元：

display: table：把元素渲染为一个块级表格区域，对应HTML中的<table>。
display: inline-table：创建行内级表格，效果类似inline-block，但表现为表格。
display: table-row：将元素转为表格行，相当于<tr>。
display: table-row-group：表现为一组表格行（如<tbody>）。
display: table-header-group与display: table-footer-group：分别扮演表格头和尾，渲染时会自动将头部行浮在表的顶部，尾部行排在最底，尤其适合打印分页时每页重复表头/表尾。
display: table-column与display: table-column-group：即便在页面不可见，依然能用来批量设置某一列的样式、宽度等属性。
display: table-cell：为单个单元格，等价于<td>和<th>。

熟练运用这些display类型，开发者可以完全脱离原生<table>语法，在多种标记体系下灵活实现表格布局。例如，将某个比赛数据的XML结构，通过CSS赋予表格语义，就能直接渲染为美观的数据表。

请牢记：CSS表格模型以“行”为首要顺序，列的推导是以行结构为前提。这一底层哲学将直接影响你的表格布局思路。

行优先

CSS的表格布局机制本质上采用了“先行后列”的思维方式。也就是说，在生成和渲染表格结构时，浏览器始终是以“行”（Row）作为基础维度，后续的“列”信息都是从现有行中的单元格排列自动推算出来的。这种方案之所以被采纳，主要是因为绝大多数标记语言（比如HTML）天生就是以行为基本单位来描述表格。

以HTML为例，表格总是先用<tr>来界定每一行，每一行内部再嵌套若干<td>，各行的第1个<td>最终垂直排成第一列，第2个<td>序列则成为第二列，依此类推。这种线性、逐行构建的方式让表格结构更自然、清晰。对于要求以“列优先”描述的其他标记格式（如某些XML结构），用CSS实现对应表格语义就会显得异常麻烦。因为CSS底层只能基于已知行去解析和成型表格的整体格局。

列

虽说CSS以行为中心来梳理表格，但实际表格中的“列”同样不可或缺。每一个单元格总是位于特定的行和特定的列上——这意味着行和列共同决定了单元格的精确位置。但是，在CSS中，列和列组具备的直接样式控制能力非常有限，只能作用于如下4个非表格属性：

border（边框）；
background（背景）；
width（宽度）；
visibility（可见性）。

这里的每一项都有特定的应用条件：

当使用 border-collapse: collapse 时，border 属性才真正影响列和列组，并参与整体边框合并运算，浏览器据此生成最终的边界线效果。
background 的作用要优先级最低：只有在同列的某些单元格和所属行未显式设定背景色时，列背景才被渲染出来。
width 属性主要限定列的最小宽度值，但它不一定能实际约束列宽，遇到内容溢出或样式强制时，列宽度依然会扩大以适应内容。
visibility 可选值仅限 collapse，当设置为该值时，相关列及单元格会被整体隐藏，同时表格宽度自动缩减相应空间。

正是上述特性，让我们可以针对整个列进行统一样式设定，既提升了表格表现力，也简化了样式管理。

自动补齐

在实际开发中，我们常常会遇到表格结构定义不完整、标签遗漏等情况。为避免解析错误，CSS标准规定：当发现表格缺少某些结构性节点时，渲染引擎会自动补齐缺失部分，即自动插入被称为“匿名表格对象”的结构，用于维护表格的完整形态。

通俗地说，比如一个HTML中只出现了<table>和若干<td>，但中间缺了行标签<tr>，CSS布局机制会检测到不规范结构，自动在合适位置插入匿名的行对象，把这些<td>串联起来。这类“自动修复”过程遵循一套详细的判定规则：

当存在单元格，但父级并不是表格行时，会在两者间补齐匿名行，将相邻的单元格纳入该行。
如果表格行的父元素并非合法的表格容器，则会插入匿名表格对象包裹这些行。
针对列、列组、标题、页眉页脚等特殊表格元素，也设计了各自的补齐策略。
如果表格直接包裹的并不是表格行，系统也会插入匿名行来整理结构。
行组内部如果包含非行元素，亦会自动补充对应匿名行。
表格行中若放入了非单元格内容，CSS会补建匿名单元格节点以容纳。
其余类似情况下均有类似兜底处理，确保最终的DOM结点逻辑完备，对渲染没有致命影响。

通过这种机制，即使开发者有时疏于嵌套规范标签，浏览器依然能重建正确的表格布局，从而保障显示效果和兼容性。

表格展示层级与样式叠加

当浏览器渲染CSS表格时，采用了一种分层叠加的样式策略。也就是说，表格的每一个组件（如表格本体、列组、单列、行、单元格）都分别拥有独立的样式层级，按照一定顺序依次渲染，避免样式混乱与优先级冲突。

渲染层级结构详解

表格的视觉呈现类似于一层层覆盖的剖面，从下至上依次包括：

表格本体：最底层绘制，负责展示整个表格范围的背景或整体边框。
列组：如果设置了列组合样式，这一层会紧随表格整体层之后渲染。
单个列：具体到单独某一列的样式（如特定列宽或背景）会在此处添加。
行：表格的每一行作为独立层级叠加在列之上，若行和列同时有背景，行的背景会覆盖列的背景。
单元格：最顶层渲染内容，包括单元格边框、背景和最终文本或组件等。

这种层级体系带来的直接效果是：如果同一个位置的行和列都指定了背景色，行的背景色最终会被显示出来，而列的同位置背景会被遮挡。反之，如果既没有行为单元格指定背景，那么表格本身的背景则会透出显示。这一分层策略，不仅指导我们合理书写表格样式，还帮助理解表格各部分视觉叠加的真正顺序，从而实现更灵活、可控的美观数据展示。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        background: #e8f5e8;
        border: 2px solid #2e7d32;
        border-collapse: separate;
        border-spacing: 3px;
      }
      td {

在上面的示例中，我们能够直观地观察到：当单元格本身未设置特定背景色时，表格整体设置的绿色背景会通过这些单元格显现出来。而对于被高亮的行，橙色的背景色覆盖了原有的绿色，从而突出该行内容；至于带有特殊标记的单元格，还会用红色背景进行单独强调，使其在表格中更加显眼。

表格标题

表格的标题能为表格内容增加一个简洁明了的描述，有助于用户快速了解表格展示的信息。借助caption-side这个属性，我们可以灵活地调整标题的位置，让它位于表格的顶部或者底部，满足不同的排版需求。

值得注意的是，表格标题会以块级盒子的形式进行渲染，并与表格整体进行定位关联。虽然标题通常会继承部分表格样式（如文字颜色等），但它在结构上仍是相对独立的元素，不会被表格主体直接影响，从而保证了良好的样式可控性和展示灵活性。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        border: 2px solid #1976d2;
        border-collapse: collapse;
        margin: 20px auto;
        color: #1976d2;
      }
      caption

在上述示例中，我们利用了HTML的caption元素为表格添加了标题，并结合caption-side属性灵活地调整标题在表格中的展示位置。这种做法不仅能让表格内容更加易于理解，也方便读者迅速获取表格的主题信息和上下文背景。

表格边框

在进行CSS表格排版时，边框的处理往往是技术实现中的重点和难点之一。CSS标准针对表格边框，设计了两种截然不同的模型：即分离边框模型（separate）与折叠边框模型（collapse）。

分离边框

分离边框模型下，每一个表格单元格的边框均为独立存在，彼此之间互不影响，边界不会合并。这意味着每个单元格都像是被一个完整围栏包裹，看起来结构分明、边线清晰。这一模型下，单元格之间的间距是通过设置border-spacing属性实现的。通过配置该属性，我们可以灵活控制横向和纵向的间隔大小，让整个表格布局显得更加疏朗而有层次感。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .spaced-table {
        border-collapse: separate;
        border-spacing: 8px 4px;
        border: 3px solid #9c27b0;
        background: #f3e5f5;
      }

本例主要说明了“分离边框模型”的核心特性：通过设置 border-spacing 属性，我们可以灵活地调整表格中单元格之间的间距，进而实现多样化的排版效果。例如，上面的表格分别设定了8px的水平间距和4px的垂直间距，使各单元格间形成明显的分隔。而下方的表格未设任何间距，呈现出更为紧凑的视觉感受。

空白单元格的显示处理

在分离边框模型下，如何处理那些没有内容的空白单元格是一个值得深入了解的细节。通过设置 empty-cells 属性，开发者可以控制这些单元格是否要呈现边框及背景效果。

需要注意的是，CSS对空白单元格的判定非常严格——单元格内部必须完全为空，不能包含空格、换行等不可见字符，否则不会被视作真正的“空白单元格”。

探索折叠边框模型

与分离边框模型不同，折叠边框模型致力于展现表格边框无缝拼接的效果。在该模式下，相邻单元格的边界会自动合并，仅显示优先级最高的那条边框，整体看起来更加统一平滑。

值得注意的是，折叠边框模型具有以下几个显著特征：表格外层无法设置填充（padding），而单元格、行、行组、列及列组等层级都可以自定义边框样式。此外，相邻的边框被合并后，中间不再存在间距，从而实现完整、紧密的视觉结构。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .collapsed-table {
        border-collapse: collapse;
        border: 3px solid #2e7d32;
        margin: 20px 0;
      }
      .collapsed-table td {
        border:

上述示例展示了 CSS 折叠边框模型的基本原理：第一个表格所有单元格的边框样式和宽度完全一致，实现了整齐划一的视觉效果；而第二个表格则通过为不同的单元格设置各异的边框类型和宽度，使得边框在共享边界时能够自动协同合并，展现风格各异的混合样式。

在折叠边框模式下，CSS 存在一套边界优先级的决策机制，用于判断当多个边框重叠时，最终呈现哪一条边。这些机制的存在，是为了确保整个表格风格的一致性和可控性。

具体来说，当存在 border-style: hidden 的边框时，它的显示权重最高，可直接“遮盖”任何相邻的边界。其次，系统会比较相邻两条边框的宽度，宽度更粗的边框优先生效。如果宽度一致，则会依照边框线型的优先级排序（即 double > solid > dashed > dotted 等），确定最终显示的边界样式。

折叠边框的优先级规则较为复杂，开发者在表格设计时应充分考虑边框样式的合理搭配，避免出现不符合预期的边界显示现象。

表格尺寸

CSS 表格的实际尺寸计算是其布局中的难点之一。浏览器在确定表格宽度时，需要综合考量单元格内容的宽度、各单元格的边框以及相关间隙等多种因素，并据此得出最终宽度。为应对不同业务场景，CSS 提供了两种表格布局模型：一种是固定表格布局（fixed table layout），另一种是自动表格布局（auto table layout）。

切换布局算法

通过设置 table-layout 属性，开发者可以决定表格宽度的计算方式，这一选择不仅影响渲染的效率，还会明显改变表格的终端呈现效果。

采用固定布局（table-layout: fixed）时，浏览器仅需分析首行的内容和预设宽度即可整个表格快速完成布局，因此渲染性能较好。相比之下，自动布局模式下浏览器会遍历所有内容，为每一行和每一列做动态测算，获得更灵活但较慢的排布方案。

固定布局

在 table-layout: fixed 模式下，浏览器主要参考首行的列宽或各列的 width 属性，决定最终分配给每一列的宽度。这种布局方式不依赖所有单元格的内容长度，可以大幅加快表格的渲染速度，实现更高效的页面展示。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .fixed-layout {
        table-layout: fixed;
        width: 400px;
        border-collapse: collapse;
        border: 2px solid #1976d2;
      }
      .fixed-layout td

在上述示例中，固定宽度布局有一个明显的特点：每一列的宽度都由首行的单元格宽度来约定，后续行的数据即使比首行内容更长，也无法扩展这一宽度。因此，如果某个单元格包含的内容超过了预设宽度，那么超出的部分通常会被直接隐藏或以省略号的形式显示出来。

自动宽度布局

与固定宽度不同，传统HTML表格默认采用的是“自动宽度”布局。其核心思想是，表格会分析所有单元格的内容，根据内容的实际长度动态分配每一列的宽度。这种机制能让表格适应复杂多变的数据，但底层实现也更加复杂和灵活。

具体来讲，浏览器在渲染表格时会首先遍历全部单元格，分别计算每个单元格在理想状态下的最小和最大宽度。基于这些宽度范围，浏览器随后为每一列分配一个合适的最终宽度，使得宽内容不会被无谓截断。同时，还会综合表格整体宽度与可用页面空间，计算和调整最终的表格尺寸，使其美观、易读且契合页面布局需求。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .auto-layout {
        table-layout: auto;
        border-collapse: collapse;
        border: 2px solid #388e3c;
        margin: 20px 0;
      }
      .auto-layout

通过这个示例，我们能够较为直观地观察自动表格布局（table-layout: auto）的行为特征：表格的每一列宽度会综合所有所在单元格的实际内容来动态分配。比如，第二列由于包含较长的文本，导致这一列整体被拉宽以适配内容；反之，像第四列那样内容精简的单元格，则所占宽度很小，整个表格因此会呈现出“宽窄不一”的自然调整效果。这意味着列宽并非固定，而是充分尊重了每一列数据的真实需求，使表格对不同行数据的兼容性和适应性更强。

表格高度的处理

相较于复杂的宽度计算，表格在高度上的处理逻辑则更加直接。浏览器会根据每一行单元格的内容，“自下而上”地累加每一行的高度，总和即为整个表格的实际高度。这个过程的核心机制是：只要有单元格内的内容高度较大，整行便会随之撑开，保证所有单元格对齐且不被裁剪。

如果给表格元素手动指定了 height 属性，浏览器通常会优先尝试让表格整体高度逼近该设定值。当指定的高度大于所有内容实际需要的总高度时，不同浏览器对此的应对略有差异。部分浏览器会自动增加行间距甚至均分多余空间，使表格整体高度满足要求；也有的则直接在表格下方留出空白。需要注意，单独设置某一行或某个单元格的高度，并不总能严格达到精确效果，最终依然要受整行、整表内容实际尺寸的影响。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .fixed-height {
        height: 200px;
        border: 2px solid #f57c00;
        border-collapse: collapse;
        margin: 20px 0;
      }

上面的示例分别演示了表格高度处理的两种方式：第一个表格采用了设置最小高度的样式，使得即使内容较少时单元格也会自动填充至指定的高度；而第二个表格则不对高度做限制，表格行会根据实际内容的多少动态调整高度，实现高度自适应。

表格的尺寸并不是单一因素决定的，它由内容本身、边框线条、单元格间距等多方面共同作用得出。深入理解这些参数的协同作用，有助于我们更高效地实现可控且美观的表格排版。

表格内容对齐

在实际开发中，表格内的数据对齐不仅关乎整体视觉效果，更直接影响信息的展示规范性和易读性。借助CSS提供的多样化对齐属性，我们可以灵活地控制每个单元格内文本内容的摆放方式，提升表格的专业程度。

常见的水平对齐方法

表格中最常见的对齐需求就是水平方向上的文本排布。通常我们会用到text-align属性，来指定内容在单元格内的左对齐、居中还是右对齐。通过赋予单元格不同的对齐样式，可以使各类型信息（如标题、数据、注释）布局更加合理直观。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .alignment-table {
        border-collapse: collapse;
        border: 2px solid #9c27b0;
        margin: 20px 0;
      }
      .alignment-table td {
        border:

以上示例详细展示了表格中多种常见的文本水平对齐方式。我们可以看到，左侧对齐通常用于强调普通文本内容，使内容从单元格起始位置有良好的可读性；居中对齐则常见于表格标题或状态一类内容，能够凸显信息的整体性和视觉聚焦；右侧对齐则特别适合数值类数据（如价格、数量等），便于对齐小数点或数值位数，提升阅读和比较的直观性。对于需要更美观排版的长篇描述类信息，可选用两端对齐，让文字在单元格内均匀分布，使排版整体更整齐。

理解垂直对齐

在表格的排版过程中，内容的垂直对齐同样是一项关键因素，对视觉美观和数据对齐准确性有着重要影响。CSS通过vertical-align属性为我们提供了灵活的垂直排列选项，可以细致地控制单元格内容在垂直方向上的位置。

通常，vertical-align最常应用的几个取值包括top、middle以及bottom。其中，top表示内容会紧贴单元格或表格行的上边缘排列；bottom则让内容靠近下边界显示；middle表示内容在单元格高度范围内上下居中，非常适合需要整洁视觉对齐的场景。通过合理设置这些属性，我们可以让各类信息在表格呈现时达到最佳的排版效果和易读性。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .vertical-align-table {
        border-collapse: separate;
        border-spacing: 3px;
        border: 2px solid #ff5722;
        margin: 20px 0;
      }

上述示例详细地对比了多种垂直对齐方式的实际渲染效果：顶部对齐适用于内容较为精简或需要靠近单元格上边缘的场景；居中对齐常见于大部分数据展示需求，可让内容在单元格内视觉上更平衡；底部对齐则适合特殊排版，例如多行表头或需要贴近底部显示的内容；而基线对齐则能够使单元格内的文本根据字体基线严格对齐，对于内容字体大小不一的表格尤为关键。

表格中内容的对齐不仅影响视觉美观，更直接关系到信息展示的条理性、数据的易读性和页面的专业感。合理的对齐策略，能够有效提升表格的整体可读性和数据传达效率。

小结

这部分我们简单地梳理了CSS表格布局的知识点，包括浏览器如何将table、tr、td等元素组装为完整的结构、表格渲染的阶段与样式优先级，并深入剖析了边框的分离（separate）与折叠（collapse）两种模型的特性及应用场景。此外，还清晰区分了固定布局与自动布局算法在尺寸计算和性能适配上的不同，结合实际掌握了多种单元格内容对齐的技术细节。表格布局能够统一管理行高和列宽，实现规范而有序的数据排列，这种行列的紧密关联性令其在数据报表、统计展示、比对分析等场合拥有无可替代的优势。

虽然CSS已经提供了如Flexbox与Grid等现代布局工具，但在复杂数据展示和需要严密对齐的页面中，表格布局依然不可替代。理解其底层原理有助于我们高效制作出规范、易读、兼具美观和专业感的数据表格，进一步拓宽了对Web布局系统的认知。掌握这些核心机制后，无论是简单清单还是多层级数据表单，均能游刃有余地实现精致的表格排版。

实战练习

练习一：表格显示模式

请问以下哪个CSS属性值可以让一个普通的div元素表现为表格行？

答案： display: table-row

解释：CSS提供了多种display属性值来指定表格相关的显示模式。其中display: table-row用于将元素渲染为表格行，相当于HTML中的<tr>标签。

练习二：表格边框模型

在分离边框模型（border-collapse: separate）下，相邻单元格的边框之间会有间距，这个间距通过哪个CSS属性来控制？

答案： border-spacing

解释：在分离边框模型下，border-spacing属性用于设置相邻单元格边框之间的水平和垂直间距。例如border-spacing: 5px 10px表示水平间距5px，垂直间距10px。

练习三：表格布局算法

当设置table-layout: fixed时，浏览器如何确定表格的列宽？

答案： 主要参考首行的列宽或各列的width属性

解释：在固定表格布局中，浏览器仅分析首行的内容和预设宽度即可快速完成布局，无需遍历所有单元格内容。这种方式提高了渲染性能，但可能导致内容被截断。

练习四：内容对齐

如果要让表格中所有的数值类数据（如价格）右对齐，应该使用哪个CSS属性？

答案： text-align: right

解释：text-align属性控制文本在单元格内的水平对齐方式。右对齐特别适合数值类数据，可以让小数点或数值位数更好地对齐，提高数据的可读性和比较性。

练习五：垂直对齐应用

在表格行高度固定的情况下，如果希望单元格内容垂直居中显示，应该设置哪个CSS属性值？

答案： vertical-align: middle

解释：vertical-align属性控制单元格内容在垂直方向上的对齐方式。middle值可以让内容在单元格高度范围内上下居中，非常适合数据表格的展示。

练习六：折叠边框特性

在折叠边框模型（border-collapse: collapse）下，以下哪项特性是正确的？

A. 相邻单元格的边框会自动合并
B. 表格外层可以设置padding
C. 单元格之间的间距通过border-spacing控制

答案： A. 相邻单元格的边框会自动合并

解释：在折叠边框模型下，相邻单元格的边界会自动合并，仅显示优先级最高的那条边框，整体看起来更加统一平滑。选项B和C是分离边框模型的特性。

练习七：表格标题定位

如何让表格标题显示在表格底部？

答案： 设置caption-side: bottom

解释：caption-side属性控制表格标题（caption元素）相对于表格的位置。默认值为top（顶部），可以设置为bottom让标题显示在表格底部。

练习八：自动表格布局

在自动表格布局（table-layout: auto）下，列宽是如何确定的？

答案： 根据所有单元格的内容动态分配

解释：自动布局会分析所有单元格的内容，分别计算每个单元格在理想状态下的最小和最大宽度，然后为每一列分配合适的最终宽度。这种方式更灵活，但渲染速度较慢。

练习九：样式层级覆盖

在表格的渲染层级中，行背景色会覆盖哪一层的背景色？

答案： 列背景色

解释：表格的视觉呈现采用分层叠加策略，从下到上依次是：表格本体 → 列组 → 单个列 → 行 → 单元格。如果行和列同时设置了背景色，行的背景色会覆盖列的背景色。

练习十：空白单元格处理

在分离边框模型下，如何让完全空白的单元格不显示边框？

答案： 设置empty-cells: hide

解释：empty-cells属性控制空白单元格的显示方式。值为hide时，空白单元格的边框和背景都不会显示；值为show时，即使单元格为空也会显示边框和背景。