感谢万能的谷歌翻译

原文地址: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属性。)

您可以在文档中找到更详尽的可用CSS选择器列表。

自用的样式
.tablepress tbody td {
	font-family: Microsoft YaHei;
	font-size: 14px;
	color: #CBCBCB;
}

.tablepress thead th,
.tablepress tfoot th {
	background-color: #fda82c;
	font-family: Microsoft YaHei;
	font-size: 17px;
	font-weight: bold;
	color: #FFFFFF;
}

.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #4d9af1;
	font-family: Microsoft YaHei;
	font-size: 17px;
	font-weight: bold;
	color: #FFFFFF;
}

.tablepress .odd td {
	background-color: #434343;
}

.tablepress .even td {
	background-color: #343434;
}

.tablepress .row-hover tr:hover td {
	background-color: #EEEEEE;
	color: #111111;
}

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border: none;
}

本文被阅读了:5,906次

作者头像
关于  Ailitonia

正因站在了巨人的肩膀上,才越发觉得自己渺小。不求成为巨人,但求与其同行。 把自己所见所闻,记录下来。

→查看所有由Ailitonia发布的文章