WordPress 表格插件 TablePress 提供了方便的自定义 CSS 功能来满足不同表格、不同场合的样式需求。作为示例，这里介绍了如何组合使用 TablePress 内建的 CSS 类（样式选择器）来设定表格的行的高度。

虽然 TablePress 文档中已有关于自定义 CSS 样式的较详细说明，可能还是不如具体的例子容易看明白。

为了回应网友的咨询，下面先简单说明使用方法，然后用例子说明针对 TablePress 的 CSS 样式的写法。

方法介绍¶

TablePress 表格默认设置情况下，行高是与文字大小有关的，附加一定的（文字到表格单元格边界的）空白，而且会随着文字换行而增加单元格高度。一般情况下不需要额外设置。当然某些特殊情况可能会为了某些效果而刻意修改行的高度。有两种方式：

• 直接指定行的高度，比如 height:15px。这种方式比较粗暴，会导致行高的适应性不强，一般只用于极特殊的场合，而且会受到表格内内容的影响。比如内容尺寸很大，但是行高又不够，这就会出现问题。
• 指定内容与单元格边框之间留白的大小。这样的话，表格行高会随着单元格内容的尺寸而自动调整，但是始终在内容与边框之间保持一定的缝隙。

为了实现前述目的，只需要组合使用 TablePress 文档：CSS 选择器和自定义样式 中介绍的 CSS 类即可编写出只针对 TablePress 表格的样式。

然后依次进入 WordPress 后台 ——> TablePress(或是“表格”） ——> 插件选项 页面，将“前端选项”下的“自定义 CSS”后面“加载这些‘自定义 CSS’ 指令以影响表格的样式”这句话前面的框勾选上。此时下面的文本编辑区域变为可写入状态。将上面的自定义 CSS 样式放入框中。如下图所示。

编辑完了当然要保存了：单击该页底部的“保存更改”按钮。如果这里遇到问题，可以参考TablePress FAQ：保存自定义样式的方法。

直接指定高度¶

特定表格的某行¶

指定 ID 为 2 的表格（表格 ID 可在 TablePress 管理页面的“所有表格”列表里查到，列表的第一列显示的就是表格内部序号 ID）的第 1 行和第 2 行的高度都为 20px。

自定义 CSS 样式为，

.tablepress-id-2 .row-1,
.tablepress-id-2 .row-2 {
  height: 20px;
}

特定表格的所有行¶

指定 ID 为 2 的表格的所有行的高度都为 20px。

自定义 CSS 样式为，

.tablepress-id-2 tr {
  height: 20px;
}

全站范围内所有 TablePress 表格的标题行¶

这个只对设置了第一行为标题行的表格有效。设置首行的高度都为 20px。

自定义 CSS 样式为，

.tablepress .row-1 th {
  height: 20px;
}

全站范围内所有 TablePress 表格的所有行¶

设置所有行的高度都为 20px。

自定义 CSS 样式为，

.tablepress tr {
  height: 20px;
}

指定留白的大小¶

假设要调整留白的大小为 5px。下面直接写出 CSS 样式代码。

特定表格的某行¶

仅指定 ID 为 2 的表格的第 1 行。因为不确定第一行是否被设置为标题行，所以 th（标题行的单元格）和 td（普通行的单元格）都用上。

自定义 CSS 样式为，

.tablepress-id-2 .row-1 th,
.tablepress-id-2 .row-1 td {
  padding: 5px;
}

特定表格的所有行¶

指定 ID 为 2 的表格所有行。

自定义 CSS 样式为，

.tablepress-id-2 td {
  padding: 5px;
}

全站范围内所有 TABLEPRESS 表格的标题行¶

这个只对设置了第一行为标题行的表格有效。

自定义 CSS 样式为，

.tablepress th {
  padding: 5px;
}

全站范围内所有 TABLEPRESS 表格的所有行¶

自定义 CSS 样式为，

.tablepress td {
  padding: 5px;
}

如果需要关于 TablePress 的其它帮助，请访问 TablePress 中文页面获取更多信息。TablePress 常见问题页面还有更多自定义 CSS 样式的示例及其他问题的解决方法，欢迎查阅。©

本文发表于水景一页。永久链接：<https://cnzhx.net/blog/tablepress-row-height-settings/>。转载请保留此信息及相应链接。