TablePress 文档:CSS 选择器与自定义样式

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 使用及开发文档页面获取其它方面的说明文档。©

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

3 条关于 “TablePress 文档:CSS 选择器与自定义样式” 的评论

  1. 引用通告: TablePress FAQ:如何将表格在页面中居中显示 | 水景一页

  2. 引用通告: TablePress FAQ:保存自定义样式的方法 | 水景一页

  3. 引用通告: 指定 TablePress 表格某行/某列的背景色 | 水景一页

时间过去太久,评论已关闭。
如果您有话要说,请到讨论区留言并给出此文章链接。
谢谢您的理解 :-)