TablePress的自定义CSS 2018年3月5日
小本本
4 Comments

感谢万能的谷歌翻译

原文地址：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;
}

本文被阅读了：7,253次

作者头像
关于  Ailitonia

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

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