TablePress 表格在 WordPress 页面上表现出来的外观由该页面的样式表（style.css）中关于表格的代码来决定。你想让表格表现出什么样子，就需要给它相应的样式表定义。可以参考在 WordPress 中手工编写 HTML 表格一文中关于表格 CSS 的说明来理解。

TablePress 中每个表格都有自己特定的 CSS 类和一个 HTML ID 可以用来针对性的设定该表格的显示样式。将自己的样式指令写入（粘贴）到“插件选项”页面的“自定义CSS”文本区域并保存（需要先勾选该页面“前端选项”里“加载这些‘自定义 CSS’ 指令以影响表格的样式”已勾选），页面就会自动加载和应用这些自定义样式。你喜欢的话，可以通过这里给自己的每个表格都设定一个独特的样式，也可以通过改变某个表格的某个特定单元格的样式。当然，这需要使用者有初等的 HTML 和 CSS 知识。

在FAQ页面有一些常见自定义 CSS 样式的示例。

CSS 类将以 <element>...</element> 的形式附加到一个 <element> 上，HTML ID 将添加为 <element id="html-id">...</element> 的形式。

CSS 类¶

参照如下格式使用：

.class /* . 后面是类的名称，替换为如下面的黑体字 */ {
/* 你的自定义 CSS */
};

tablepress (<table>的类)

每个表格都拥有这个类（全局，所有使用 TablePress 插入的表格都会受到该样式类所制定的样式的影响。

tablepress-id-<ID> (<table> 的类)

每个表格都拥有这个类（使用该表格的 ID 替换掉上面的 <ID> 即可，注意，每个表格的 ID 都是不同的）。定义 CSS 时指定了 ID，就可以将该样式只应用于编号为该 ID 的表格。

row-<number> (<tr> 的类)

每一表格的每一行都有这个类。<number> 是表格中显示行的序号，不管是表头的行还是数据的行都一并考虑。始终从 1 算起。

column-<number> (每个 <th> 或者 <td> 的类)

每个单元格都有这个类，<number> 是该单元格所属的列序号。
使用下面的样式来设定列宽！（例如，

.tablepress .column-2 {
width: 100px;
}

在FAQ页面还有另一个例子。重要提示：如果您同时使用 .column-X 和 .row-X 选择器， .row-X 必须置于 .column-X 的前面（因为它是赋给 <tr> 标记的，而 <td> 标记包含在 <tr> 标记之内）。

odd 和 even (每个 <tr> 的类)

如果“表格选项”中“交替行背景色”（或相应“简码”参数）被启用，表格的每一行都会得到这两个类的其中一个，根据该行是奇数行还是偶数行而定。使用这两个类来设定变化的行背景色。在FAQ中有一个示例说明了该标记的用法。

tablepress-table-name (<h2> 的类)

如果“表格选项”中“显示表格名称”被启用，表格的名称将会显示在表格上方/下方，并用 HTML 的 <h2> 标记，它的 CSS 类就有这个。

tablepress-table-description (<span> 的类)

如果“表格选项”中“显示表格描述”被启用，表格的描述将会被显示在表格的上方/下方，并用 <span> 来标记，它的类就有这个。

CSS/HTML IDs¶

参照如下格式使用：

#html-id {
/* 你的自定义 CSS */
};

tablepress-<ID>-no-<number> (<table> 的 ID)

每个表格都有一个类似于这种格式的 HTML ID。
<ID> 即是 TablePress 里“表格列表”中的 ID（可以理解为表格内部编号，每个表格都不一样）。
<number> 表示页面中到该位置为止的表格的计数/显示。例如，如果你在网站上将同一个表格（具有相同<ID>）显示了两次（例如一次在文章里，第二次在侧边栏里），第一次显示的该表格就没有 -no-... 而第二次显示的这个表格其 <number> = 2。
这就意味着，这些 HTML ID 用于样式时不是很可靠，因为它们会随着表格在网页上显示（出现）的顺序不同而发生变化。比如如果将侧边栏从右侧改为左侧（很多主题都可以这样设定）并第一个显示出来，上面的 <number> 就变了。使用这些 ID 是为了调用 JavaScript 库（如果对当前的表格启用了该功能的话）。

这是 WordPress 表格插件 TablePress 的简体中文说明文档的第六篇，介绍了 TablePress 内部为表格设定的 CSS 类（选择器）和 HTML 标记 ID，以及如何用它们来给表格，或者某个特定表格的某个元素设置自己定制的 CSS 样式。请访问 TablePress 使用及开发文档页面获取其它方面的说明文档。©

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