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

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

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

方法介绍

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

直接指定行的高度,比如 height:15px。这种方式比较粗暴,会导致行高的适应性不强,一般只用于极特殊的场合,而且会受到表格内内容的影响。比如内容尺寸很大,但是行高又不够,这就会出现问题。

指定内容与单元格边框之间留白的大小。这样的话,表格行高会随着单元格内容的尺寸而自动调整,但是始终在内容与边框之间保持一定的缝隙。

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

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

html5 table 行高 html表格行高如何设置_CSS

编辑并应用 TablePress 表格自定义 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 样式的示例及其他问题的解决方法,欢迎查阅。©