插件名称:
TablePress – Tables in WordPress made easy
插件地址:
https://wordpress.org/plugins/tablepress/
插件用途:
表格插件
插件常见问题:
https://tablepress.org/faq/
支持导入 导出
栏位
添加“自定义CSS”代码
要添加CSS命令(层叠样式表),只需进入TablePress的“插件选项”屏幕上的“自定义CSS”textarea,然后在其中输入它们。 它们将覆盖默认样式,因此您不必直接更改任何文件(在每次TablePress更新后,这些修改都会丢失)。
我怎样才能改变单行的背景颜色?
改变单行的背景颜色,例如突出显示它,可以用下面的CSS来完成:
.tablepress-id-N .row-X td {
background-color: #ff0000;
}
其中N (表格ID)和X (行数)需要在您的表格中调整。#ff0000是所需颜色的十六进制颜色代码,在本例中为红色。
这只需要输入到“Plugin Options”页面上的“Custom CSS”文本框。
我怎样才能改变表头行的背景颜色?
这可以通过下面的CSS代码完成(只需将其添加到“插件选项”中的“Custom CSS”textarea):
.tablepress thead th,
.tablepress tfoot th {
background-color: #ff0000;
}
要在排序时更改悬停颜色以及当前排序的列的背景颜色,请添加
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
background-color: #00ff00;
}
如何更改用于标记交替行的颜色?
这可以通过下面的CSS代码完成(只需将其添加到“插件选项”中的“Custom CSS”textarea):
.tablepress .odd td {
background-color: #ff0000;
}
.tablepress .even td {
background-color: #00ff00;
}
您可以更改奇数行和偶数行的颜色,但通常您只需更改奇数行的颜色。 如果您只是想为特定表格更改此设置,请使用.tablepress-id-N (其中N是表格的ID)作为选择器,而不是.tablepress
如何更改用于突出显示悬停行的颜色?
这可以通过下面的CSS代码完成(只需将其添加到“插件选项”中的“Custom CSS”textarea):
.tablepress .row-hover tr:hover td {
background-color: #ff0000;
}
如果您只是想为特定表格更改此设置,请使用.tablepress-id-N (其中N是表格的ID)作为选择器,而不是.tablepress 。
如何更改表格的字体,字体大小和字体颜色?
这可以通过下面的CSS代码完成(只需将其添加到“插件选项”中的“Custom CSS”textarea):
.tablepress-id-N tbody td {
font-family: Tahoma;
font-size: 14px;
color: #ff0000;
}
N需要更改为所需修改的表格的ID(或者使用.tablepress作为选择器的第一部分,以便将此代码应用于所有表)。 font-family , font-size和color的值当然可以调整或删除,如果不需要的话。
我如何突出显示某些单元格或其内容?
如果你知道这个值的行号和列号,你可以像这样使用CSS:
.tablepress-id-N .row-X .column-Y {
background-color: #ff0000;
}
(其中N (表格的ID), X (行的编号)和Y (列的编号)显然需要根据您的表格进行调整。)
如果您不知道行数和列数(或者它们有时会发生变化,或者您的值超过了要突出显示的值),我建议为HTML <span>元素创建一个新的CSS类。 然后,您会将该值包装在span标签中,如:
<span class=”hilite”>your important value</span>
并可以创建类似的CSS如:
.tablepress .hilite {
color: #ff0000;
}
我如何设置列宽?
这可以通过下面的CSS代码完成(只需将其添加到“插件选项”中的“Custom CSS”textarea):
.tablepress-id-N .column-2 {
width: 100px;
}
N需要更改为所需修改的表格的ID(或者,如果希望将它应用于所有表,请使用.tablepress作为选择器的第一部分)。
这是我推荐的一般模式。 您可以根据需要经常使用该选项,每次将相关列更改为正确的数字。
注意:在大多数情况下,不需要直接设置列宽! 相反,您将希望减少填充(单元格中的文本和单元格边缘之间的空白),并使用CSS代码
.tablepress-id-N .column-2 {
padding: 4px;
}
这又需要如上调整。
如何在页面上居中一个表格?
这可以通过下面的CSS代码完成(只需将其添加到“插件选项”中的“Custom CSS”textarea):
.tablepress-id-N {
width: auto;
margin: 0 auto 1em;
}
N需要更改为所需修改的表格的ID(或者,如果希望将它应用于所有表,请使用.tablepress作为选择器的第一部分)。
我如何从表格中删除边框?
这可以通过下面的CSS代码完成(只需将其添加到“插件选项”中的“Custom CSS”textarea):
.tablepress-id-N,
.tablepress-id-N tr,
.tablepress-id-N tbody td,
.tablepress-id-N thead th,
.tablepress-id-N tfoot th {
border: none;
}
N需要更改为所需修改的表格的ID(或者使用.tablepress作为选择器的第一部分(五次)以一次从所有TablePress表中删除边界)。
什么CSS选择器可用?
最重要的选择器应该是.tablepress ,它适用于插件生成的所有表格。 如果您不想将样式设置应用于所有表格,但仅适用于某些表格,则可以使用.tablepress-id-N ,其中N是表格的ID。
在大多数情况下,您会想要设置单元格的样式,所以CSS命令将如下所示:
.tablepress-id-N tbody td {
property1: value1;
property2: value2;
}
( property1和property2仅用于演示,需要更改为要更改的CSS属性。)
常用:
改动 TablePress 中默许的替换行布景色彩设置
.tablepress .odd td { /* 奇数行背风景 */
background-color: #ff0000; /* 此色彩值为示例,红色 */
}
.tablepress .even td { /*偶数行背风景 */
background-color: #00ff00; /* 此色彩值为示例,绿色 */
}
更改 TablePress 中默许的鼠标悬停时行的布景色彩
.tablepress .row-hover tr:hover td {
background-color: #ff0000;
}
更改表格中的字体、字体大小和字体色彩
.tablepress tbody td {
font-family: Tahoma; /* 字体 */
font-size: 14px; /* 字体大小 */
color: #ff0000; /* 字体色彩 */
}
将单元格内文本居中闪现
.tablepress thead th, /* 用于标题栏 */
.tablepress tbody td { /* 用于表格中的一切单元格 */
text-align: center; /* 程度居中 */
vertical-align: middle; /* 垂直居中 */
}
将表格在页面中居中闪现
.tablepress {
width: auto;
margin: 0 auto 1em;
}
躲藏特定表格的边框
躲藏表格的边框一般情况下是对某一特定的表格做出的改动,所以这里给出指定id为N的表格躲藏边框的CSS,也便利我们对照上面大局的CSS。
.tablepress-id-N,
.tablepress-id-N tr,
.tablepress-id-N tbody td,
.tablepress-id-N thead th,
.tablepress-id-N tfoot th {
border: none;
}