表格小得像脚注：一次 WordPress 主题 CSS 的排查与修复（附逐行注释）

一、症状：表格小得像脚注

前一篇《Wi-Fi 扫描表里的 CH 是不是信道》发布后，文章里那张 9 列的统计表，被压成了脚注大小的一块。

具体有三个表现：

• 表格只占了正文栏宽度的三分之一左右，右边一大片空白；
• 表头「信道」「热点数」连边框都没有，看着不像表格的一部分；
• 单元格里的数字贴着线，字挤在一起。

先排除一个可能：这不是编辑器把 HTML 结构吃掉了。回读数据库里的正文，<table>、<tr>、<th>、<td> 全都在，结构完整。也就是说，问题出在样式表，不在内容。

二、定位：把两条样式表拉下来，搜 table

排查不需要装什么工具。两种路子都行：

1. 浏览器里 F12，点中那个表格，看右侧 Computed / 计算样式 里 display 和 padding 的值，再点到 Styles 面板看是哪条规则在生效；
2. 直接把 CSS 下载下来 grep。这个站是 WordPress，主题目录固定：/wp-content/themes/主题名/style.css，另外还加载了一份 bootstrap.min.css。

搜完 table，一共三条规则叠在一起，缺一条都解释不全这个现象：

序号	位置	规则原文	造成的后果
1	主题 style.css 第 68 行	.article_content table{display:block;max-width:100%;}	主因：表格被当成普通块级元素，内部收缩成内容宽度
2	bootstrap.min.css 的 reset 段	td,th{padding:0}	单元格内边距被清零，字贴着线
3	主题 style.css 第 69–71 行	.article_content table tr td{border:1px solid #999999;}	只给 td 加了边框，th 没有，所以表头是裸的

第 2 条要补一句：bootstrap 只在元素带 .table 这个 class 时才把 padding:8px 补回来。文章里的表格是编辑器直接生成的，没有这个 class，于是 padding:0 就成了最终值。

三、主因拆解：display:block 到底做了什么

第 1 条为什么能把表格压扁？简单说：表格的宽度协商，是靠一层「表格外壳盒」来管的。把 table 本身设成 block 之后，里面的 tr 就没人管了，浏览器只好临时生成一个「匿名表格盒」把它们包起来——而这个匿名盒是按内容收缩的。

关键就在这：width:100% 作用在外层那个 block 盒子上，传不进里面那层匿名表格盒。宽度断在两层之间，表格只能是内容那么宽。左边「信道」两个字加八个数字，就这么宽。

顺带说清楚这个坑为什么隐蔽：display 只改「怎么画」，不改「是什么」。标签语义、屏幕阅读器读到的「这是一张表格」统统不变，变的只是浏览器拿哪套算法排版。所以在开发者工具里看 HTML 结构，一切正常，光靠肉眼很难想到是一行 CSS 的事。

至于主题作者当初为什么要写 display:block，我猜本意是「让宽表格在手机上横向滚动」——这个思路本身对，但他只写了一半：block 提供了可滚动的容器，还需要 overflow-x:auto 才会出滚动条（见第六节）。

四、修复：完整代码，逐行注释

把第 68–71 行那两条规则整段替换成下面这段。每一行都写了它管什么：

/* 文章内表格：恢复表格布局（原来 display:block 会把表压扁成内容宽度），
   并补回被 bootstrap reset 清零的单元格内边距 */
.article_content table{
	display:table;              /* 恢复表格布局算法——原来是 block，病根就在这一行 */
	width:100%;                 /* 表格宽度 = 容器宽度，不再按内容收缩 */
	max-width:100%;             /* 窄屏上不撑出屏幕（原规则里的这一句要留着） */
	margin:1.2em 0;             /* 上下各留 1.2 个字高的间距，和正文段落节奏一致 */
	border-collapse:collapse;   /* 相邻单元格共用一条边框，避免出现双线 */
	table-layout:auto;          /* 列宽按内容自动分配，而不是平均分 */
}
.article_content table th,
.article_content table td{
	border:1px solid #999999;   /* 四边 1px 实线灰边框——th 和 td 都要有 */
	padding:8px 12px;           /* 上下 8px、左右 12px 内边距，字不再贴着线 */
	font-size:inherit;          /* 字号跟随正文，不被 bootstrap 的 14px 压小 */
	line-height:1.7;            /* 行高 1.7，与正文一致，多行文字不挤 */
	text-align:left;            /* 统一左对齐（浏览器默认会把 th 居中） */
	vertical-align:top;         /* 顶端对齐，长短不一的行看起来更整齐 */
	word-break:break-word;      /* 超长英文或网址强制折行，不把表格撑破 */
}
.article_content table th{
	background-color:#f2f2f2;   /* 表头浅灰底，和内容行区分开 */
	font-weight:600;            /* 表头加粗（600 比 bold 的 700 柔和一点） */
	white-space:nowrap;         /* 桌面端表头不折行，「信道」「热点数」保持一行 */
}

/* 窄屏：文字与内边距收紧，表头允许折行，避免宽表撑爆屏幕 */
@media (max-width:768px){
	.article_content table th{
		white-space:normal;     /* 手机屏幕窄，表头该折就折 */
	}
	.article_content table th,
	.article_content table td{
		padding:6px 8px;        /* 内边距收紧，把位置让给内容 */
		font-size:15px;         /* 字号降一档，9 列表格也能塞进手机屏 */
	}
}

四处实质变化，对应三条病因：

1. display:block → display:table，并把 width:100% 加回来——治主因；
2. th 和 td 合并成一条规则（中间那个逗号是「或」），表头终于有边框了——治病因三；
3. 补上 padding:8px 12px——治病因二；
4. 新增窄屏媒体查询，手机上是收紧而不是变形。

五、修复前后对比

同一个容器、同一张表，只换了 CSS：

左边那半就是故障现场：表格 320px 宽，表头飘在表格外面没有边框。右边是修复后——撑满整栏、表头灰底、四边有框、字有呼吸感。

六、顺带讲清三个问题

这次排查里我连着问了三个 CSS 概念，都是这件事的延伸，一并记下来。

1. overflow-x:auto 是什么意思

overflow 管的是「内容超出了盒子怎么办」。overflow-x 只管横向，auto 的意思是：超出了才给滚动条，不超出就当没这回事——不会平白多一条空滚动条。

对照着看就明白主题作者的思路了：他想让宽表格在手机上横着滑，于是写了 display:block（造一个能滚的盒子），却漏了 overflow-x:auto（造出滚动条）。结果滚动条没有，表格还先被 block 压扁了。

2. .article_content table tr td 是什么意思，加上 th 又是什么

这是后代选择器：空格的意思是「里面的」。四个名字从外到内一层层缩小范围，四个条件都满足才命中。而逗号的意思是「或」。

所以原规则只写了 td，th 就够不着——这就是表头没边框的全部原因。补上之后写成：

.article_content table tr td,
.article_content table th{
	border:1px solid #999999;
}

一个容易混的点：.a .b（空格）是「a 里面的 b」，.a, .b（逗号）是「a 和 b 两个都算」，而 .a.b（没有空格）意思是「同一个元素同时带这两个 class」——三者完全不同，差一个空格意思就变了。

3. display:table 和 display:block 有什么区别

一句话：display:table 是「用表格自己的布局算法来画」，display:block 是「把这个元素当成一个普通 div 来画」。<table> 标签天生就是 display:table，主题把它改成 block，等于把表格的骨架抽掉了（见第三节那张图）。

这两个值各自都有正经用法，别一刀切地当成「坏的」：

• display:table 写在 div 上，是十多年前 flex/grid 还没普及时的「表格布局」，用来做等高列、垂直居中；现在基本被 flex/grid 取代，看到老代码能认出来就行。
• display:block 写在 table 上，唯一的正当用途就是配合 overflow-x:auto 做移动端横向滚动——这就是本站主题想干而没干成的事。

七、怎么让改动生效

改的是主题文件，两条路：

• 后台：外观 → 主题文件编辑器 → 选 style.css → 找到第 68 行附近 → 整段替换 → 保存；
• FTP：直接覆盖 wp-content/themes/草根笔记/style.css。

三个提醒：

1. 改完按 Ctrl+F5 强刷。CSS 有缓存，普通刷新可能看不到变化。
2. 别把这段粘进文章正文。编辑器会过滤 <style>，就算侥幸存下来，后台和前台显示也会不一致。
3. 这套规则是全站生效的，所有文章里的表格都会一起变好。只想改某一篇，就得在编辑器里给表加个 class 再单独写——那样每篇都要处理，不划算。

八、一句话总结

表格变小的原因不是编辑器、不是主题坏了，而是主题给 table 写了 display:block，把表格的布局算法换成了普通块级元素的；再加上 bootstrap 把单元格内边距清零、原规则又漏了 th 的边框，三个小问题叠成了「又小又挤又没框」。

修法也很朴素：display 改回 table、宽度补成 100%、内边距加回来、th 一起写进选择器。CSS 里最难的不是写规则，是知道哪条规则在生效。

参考

• MDN：display（各取值的布局含义）
• MDN：overflow-x
• MDN：后代选择器（空格）
• Bootstrap 3 默认样式：Tables（.table 类才补 padding 的来源）

相关文章

• 鼠标悬停时图片放大功能
• css 规则中两个类连在一起和中间有空格的区别
• 如何给网站添加bootstrap轮播图
• display:inline-block; 在css中是什么意思？
• 通过display:block调节元素宽度
• 把腾讯视频内嵌到自己的网页上教程
• 怎样批量给标签添加类的属性
• 使用media标签使页面样式随着屏幕大小变化
• 引用的视频无法放大观看：只需要加一个CSS属性
• CSS 里一个class跟两个类名的问题