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

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

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

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

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

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

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>