WP-Table Reloaded 常见问题

本页所列是关于WordPress表格管理插件WP-Table Reloaded的常见问题(FAQ)。我会尽量增加各种问题,并将来自各种评论、论坛的回答,特别是插件作者的权威回复列举在这里。

如果该页的信息没能解决您的问题,请详细阅读相关文档,或者到讨论区相应板块寻求解答。

请您在请求帮助前先阅读这些问题,谢谢!

如果您有适合这里列举的某些问题的答案,或者可能适合的答案,请联系我们

请单击黑体标题展开查看答案,有的可能需要打开另一个页面。

一般问题

  1. WordPress 中插入表格的方法
  2. 图文详解使用 WP-Table Reloaded 插件创建和管理 WordPress 表格
  3. 导入的表格显示为乱码怎么办?
  4. 看了下面的 CSS、布局和样式,还是不会操作,或者设置之后没有效果,怎么办?
  5. 如何只让 WP-Table Reloaded 表格的某些特定列可以执行排序?
  6. 水景一页上所有关于 WordPress 表格的文章

CSS、布局和样式

如何添加自定义CSS代码?
要添加CSS命令,请进入“插件选项”页面,在“自定义CSS样式”下的文本框里直接输入即可。如果有多个自定义 CSS 样式,请接着在后面输入(前面已经输入的不要删除)。在这里输入的CSS代码将覆盖在页头里引用的CSS文件里的描述,所以你不需要修改原样式表文件!
怎么改变表中行的背景颜色?
要改变表格主体部分(非表头、表尾)某一行的背景颜色,你需要定义一些CSS样式,如:

.wp-table-reloaded-id-N .row-X td {
   background-color: #ff0000;
}

(这里 N (表格 ID),和 X (行号)需要根据你的实际情况来对应修改。)

将这些CSS命令输入到“插件选项”页面的“自定义CSS样式”下面的文本区域即可。

怎么更改表格头部(表头)的背景色?
可以使用下面的CSS代码来实现(将这些CSS命令输入到“插件选项”页面的“自定义CSS样式”下面的文本区域即可):

.wp-table-reloaded-id-N th, .wp-table-reloaded-id-N .sorting {
  background-color: #ff0000;
}

.wp-table-reloaded-id-N .sorting_asc, .wp-table-reloaded-id-N .sorting_desc {
  background-color: #00ff00;
}

需要将 N 修改为表格 ID(代码中的4个地方都需要修改)(或者使用 .wp-table-reloaded 作为选择器的一部分)。

第一行的 CSS 命令设置了常规的背景颜色。第二行命令设置了当前排序情况下的表头的背景色

如何更改用于高亮(突出显示)行的背景色?
可以使用下面的CSS代码来实现(将这些CSS命令输入到“插件选项”页面的“自定义CSS样式”下面的文本区域即可):

.wp-table-reloaded-id-N .row-hover tr:hover td {
  background-color: #ff0000;
}

需要将 N 修改为表格 ID(或者使用 .wp-table-reloaded 作为选择器的一部分)。

如何设置变换奇偶行背景色的颜色?
可以使用下面的CSS代码来实现(将这些CSS命令输入到“插件选项”页面的“自定义CSS样式”下面的文本区域即可):

.wp-table-reloaded-id-N .odd td {
  background-color: #ff0000;
}

.wp-table-reloaded-id-N .even td {
  background-color: #00ff00;
}

需要将 N 修改为表格 ID(代码中的2个地方都需要修改)(或者使用 .wp-table-reloaded 作为选择器的一部分)。

奇数行和偶数行的背景色都可以进行修改,不过一般情况下只需要修改奇数行的背景色。

如何修改表格中的字体、字号和字体颜色?
可以使用下面的 CSS 代码来实现(将这些 CSS 命令输入到“插件选项”页面的“自定义 CSS 样式”下面的文本区域并保存;如果有多个类似的样式代码,请接着往后输入即可):

.wp-table-reloaded-id-N td {
  font-family: Tahoma;
  font-size: 14px;
  color: #ff0000;
}

需要将 N 修改为表格 ID(或者使用 .wp-table-reloaded 作为选择器的一部分,如 .wp-table-reloaded .wp-table-reloaded-id-N td)。其中 font-family,font-size 和 color 的值可以根据需要调整,如果不需要的话甚至可以删除。

如何高亮某些单元格或者它们的内容?
如果你知道问题中提到的这些单元格的行号和列号,你可以使用下面的CSS代码:

.wp-table-reloaded-id-N .row-X .column-Y {
   background-color: #ff0000;
}

(其中 N (表格 ID),X (行号),以及 Y (列号)需要根据你的具体情况进行设定。

如果你不知道具体的行号和列号(或者它们有时候可能会发生变化,或者你需要高亮不止一个单元格),推荐你创建一个新的CSS类来设定该部分的样式(使用 span)。然后将这些值使用 span 标记来封装,例如

<span class="hilite">your important value</span>

然后创建合适的CSS命令,如

.wp-table-reloaded .hilite {
  color: #ff0000;
}
如何设置列宽?
可以使用下面的CSS代码来实现(将这些CSS命令输入到“插件选项”页面的“自定义CSS样式”下面的文本区域即可):

.wp-table-reloaded-id-N .column-Y {
  width: 100px;
}

需要将 N 修改为表格 ID(或者使用 .wp-table-reloaded 作为选择器的一部分)。并且需要将Y修改为对应的需要调节的列号。

这是插件作者推荐的一般方法。只要有需要的地方就可以使用,但是一定注意每次都需要将对应的数字修改为正确的值。注意:
如果你为该表格启用了 DataTables JS 库,还需要将下面的CSS代码添加到该表格的“编辑表格”页面中”DataTables JavaScript 特性”里的“自定义命令”下的文本框里!

"bAutoWidth": false
如何使页面里表格居中显示?
可以使用CSS将一个表格居中显示。这个设置可能与使用的主题无关,因为主题的CSS可能会被某些命令覆盖掉。
你需要将简码 [table id=N /]嵌入到 HTML 标记<div> 里面,而使用CSS命令来使该 HTML 标记居中,如 width:100%; text-align:center;。这应该能使处于 <div> 标记中的表格居中显示。(请在执行类似的操作后注意查看页面效果,因为有时候WordPress会自动将 <p> 元标记添加到代码段里。
下面是一段在大多数情况下都能用的代码:

<div style="width:100%; text-align:center;">[table id=N /]</div>
如何清除表格的边框?
可以使用下面的CSS代码来实现(将这些CSS命令输入到“插件选项”页面的“自定义CSS样式”下面的文本区域即可):

.wp-table-reloaded-id-N {
  border: none!important;
  border-collapse: collapse!important;
  border-spacing: 0px!important;
}

需要将 N 修改为表格 ID(或者使用 .wp-table-reloaded 作为选择器的一部分)。

根据使用的浏览器的不同,可能还需要将属性 cellspacing 添加到表格的 HTML 代码里。可以通过添加另一个参数 cellspacing="0" 到简码里来实现这个要求,例如 [table id=N cellspacing="0" /]。这应该会将不在该CSS影响范围内的所有边框全部清除,特别是在 Internet Explorer 7 中。

有哪些CSS选择器可供使用?
最重要的选择器应该是 .wp-table-reloaded,该选择器对所有由该插件创建的表格都起作用。如果你不希望将某种样式应用于所有表格,而仅仅想应用于某一个或几个表格,你可以用使用代码 .wp-table-reloaded-id-N, 其中 N目标表格的ID号。多数情况下你可能想对某个单元格设定样式,那么CSS命令的形式如下:

.wp-table-reloaded-id-N td {
  属性1: 值1;
  属性2: 值2;
}

(“属性1”和“属性2”只是用于演示,需要根据实际情况替换为你希望更改的CSS属性。)

DataTables JavaScript 特性

如何才能让表格显示全部行,或者改变默认值10?
该特性称为“分页”,由 DataTables JavaScript 库提供。要完全关闭分页功能,可以在该表格的“编辑表格”页面中 “DataTables JavaScript 特性” 里将相应的选择框去掉。接下来描述的方法在 WP-Table Reloaded 1.7 版中已经停止使用,现在在上面提到的部分中提供了一个文本框来设定初始化行数。或者,你可以修改默认显示的条目数。只需要将下面的代码粘贴进该部分的“自定义命令”下的文本框中即可:

"iDisplayLength": 50

你可以将“50”修改为任何你想要的数值。

扩展插件

什么是“插件钩子(Plugin Hooks)”?
有了 “插件动作(Plugin Action)” 或者 “插件过滤器(Plugin Filter)” ,你就可以为 WP-Table Reloaded 开发扩展。你只需要一小段代码就可以实现。对于 WP-Table Reloaded,相关概念在 introductory post扩展页面有详细介绍。作者已经开发了不少扩展共大家使用,详见“扩展”页面。在WordPress Codex有关于“插件钩子(插件执行挂钩,Plugin Hooks)”的全面介绍。

如果该页的信息没能解决您的问题,请详细阅读相关文档,或者到讨论区相应板块寻求解答。

13 条关于 “WP-Table Reloaded 常见问题” 的评论

  1. 感谢博主的努力,不过代码有些过时了。
    比如设置列宽已经改为了:
    .tablepress-id-N .column-2 {
    width: 100px;
    }

    建议博主有空改一下吧,虽然工作量很大XD

  2. 我用的是1.9.4版本,请问如何将表格内的文字居中显示呢?并不是整个表格在页面上居中,如表1中,所有行及列里的文字都在表格内居中显示,而不是通过调整表格列宽实现美观。谢谢

  3. 1.9.4版本。怎样合并单元格?我按照提示,跨列合并没有问题,但跨行合并出了问题。我想合并A1和A2,B1和B2,在单元格A2和B2中输入#rowspan#,结果A1A2、B1B2没有合并,反而使第2行C、D以后的所有列都分别前移2列,比如C2、D2分别排到A2、B2来了。

  4. 你好,问一下,怎样设置行高?怎样将某一列定义为可输入数字的一列(以便网站来访者随意编写)?

雁过留声,人过留名

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

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