WP-Table Reloaded 是一款功能强大，可充分自定义的 WordPress 表格插件。其文档和 FAQ 文档写得非常全面且简洁。可能正是因为过于简洁，所以很多朋友在参照实施的时候会经常因理解不到位而出现差错。大家问得比较多的就是表格列宽的自定义设置问题。下面就这个问题举例进行说明。

当然，关于在 WordPress 表格插件中使用自定义 CSS 样式的详细说明，还需要参考：

1. 插件使用文档中的自定义样式、CSS 选择器一节详细列举了 WP-Table Reloaded 所使用的各种类（class）和 HTML-ID。
2. 插件常见问题（FAQ）中列举了一些常见自定义样式的用法：CSS、布局和样式。

一、改变表格列宽的设置¶

下面通过图示的方式介绍如何将一个 ID 为 1 的表格的第 1 列的宽度设定为 100px。

1、CSS 代码¶

根据 CSS、布局和样式中关于设置列宽的说明，我们需要使用如下的代码：

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

根据本例，其中 N 为表格 ID，这里是 1。Y 是列号，这里也是 1。于是上述代码应相应的写成

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

当然，根据文中的提示，我们还可以使用 .wp-table-reloaded 作为选择器的一部分。即，上述代码也可以较复杂一点儿，写成

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

但是效果是一样的，因为所有通过 WP-Table Reloaded 插件插入的表格都有这个 .wp-table-reloaded-id-N 的类，而别的方法插入的表格估计不会使用类似的类。所以即使选择器中不包含 .wp-table-reloaded ，也不会造成混淆。

2、部署代码¶

为了让上面的 CSS 代码起作用，需要让页面加载它。

从 WordPress 后台（仪表盘）依次打开工具 ——> WP-Table Reloaded ——> 表格选项页面，如下图（单击图片可查看大图）。

WordPress 表格插件选项页面

将前面准备好的 CSS 样式代码粘贴到图中自定义 CSS 下面的空白框里。以后如果还有别的定义，就接着放在后面。

单击保存选项将本次更改保存下来。现在，打开包含该表格的页面应该就能看到该自定义样式已经展示出效果了。

二、对上述代码的进一步改变¶

实际上，我们还可以使用 CSS 样式选择器来使得该表格第 1 列在网站首页的宽度为 100px，而在该表格所在文章页面时，第 1 列的宽度仍为插件的默认值。

比如这里的示例，我已经做了这样的改动：在首页（文章列表）中，该表格第 1 列宽度为 100px，而在文章页面，该表格的第 1 列宽不做特别说明（保持默认）。

很简单，只需要在前面写代码的时候稍作改变就可以了，如下：

.home .wp-table-reloaded-id-1 .column-1 {
  width: 100px;
}

我在前面加上了 .home 这个样式选择器。因为在该网站首页，页面的 body 标签拥有样式 .home；而在文章页面，页面的 body 标签使用的没有 .home。

三、进一步扩充¶

如果要调整其它表格样式/布局属性，也可参考上面的例子。当然，这需要大家有一点儿 HTML 以及 CSS 的基础知识。

也就是说，在该插件常见问题中列举的各种自定义 CSS、布局和样式，都是通过类似的操作来部署的。如果有需要，你还可以组合、变化出更多的表现形式。

最后，如果大家有什么需要，可以到讨论区开帖子，我们可以慢慢探讨。©

本文发表于水景一页。永久链接：<https://cnzhx.net/blog/wp-table-reloaded-customize-css/>。转载请保留此信息及相应链接。