城市里的游牧民族

Menu

[转]TablePress 常见问题:将单元格内文本居中显示

WordPress 表格插件 TablePress 提供了方便的自定义 CSS 功能来满足不同表格、不同场合的样式需求。有时候为了美观,我们希望将表格单元格内部的文字、图片等内容居中显示,而不是按照默认的那样左对齐,此时,可以通过其自定义 CSS 样式来很方便的实现。可以针对特定的某个表格,也可以应用于网站中的所有 TablePress 表格。

如果不清楚怎么使用 TablePress 中的自定义样式,可以参考指定 TablePress 表格某行/某列的背景色,那里有详细的操作说明。

针对特定的某个 TablePress 表格:将类似下面的自定义 CSS 样式放到 TablePress 自定义样式文本框:

.tablepress-id-N th, /* 用于标题栏 */
.tablepress-id-N td { /* 用于表格 ID 为 N 的所有表格中的所有单元格 */
   text-align: center; /* 水平居中 */
   vertical-align: middle; /* 垂直居中 */
}

这里 N 应该用要设定的表格的 ID 替换。其中,

如果要对网站中所有用 TablePress 插入的表格应用此设定,可以用 .tablepress 替换上面样式规则中前面的 .tablepress-id-N

按照上面的设置,会将一个表格(或者网站中所有 TablePress 表格,看你用的是上面哪一种了)中的所有单元格内部内容都设置为居中显示。有的时候可能只需要对某一行,或者某一列,又或者某一个特定的单元格进行这样的设置,那么,就需要对上面的样式选择器进行更详细的限定。

以 .tablepress-id-N td 为例,如果希望对某一行(行序号假设为 X)里面的所有单元格应用前面的样式,则应该这一行改为,

.tablepress-id-N .row-X

如果要同时针对 X1 行和 X2 行都这样设置,则应该使用,

.tablepress-id-N .row-X1,
.tablepress-id-N .row-X2 {
/* ... 这里省略了 ... */
}

而如果针对列(比如列号 Y),则应该使用,

.tablepress-id-N .column-Y

但是要注意,交叉使用 .row 和 .column 则表示特定的单个单元格。比如,

.tablepress-id-N .row-X .column-Y

表示针对表格 ID 为 N 的 TablePress 表格里面的 X 行和 Y 列那个位置的单个单元格。

请参考 TablePress 文档:CSS 选择器与自定义样式指定 TablePress 表格某行/某列的背景色以及 TablePress 常见问题:如何高亮单元格等文来了解 CSS 样式选择器的使用方法。

如果需要关于 TablePress 的其它帮助,请访问 TablePress 中文页面获取更多信息。TablePress 常见问题页面还有更多自定义 CSS 样式的示例及其他问题的解决方法,欢迎查阅。©

本文发表于水景一页。永久链接:<http://cnzhx.net/blog/tablepress_faq-align-text-in-cell/>。转载请保留此信息及相应链接。

— 于 共写了1384个字
— 文内使用到的标签:
本作品采用知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可。

2条回应:“[转]TablePress 常见问题:将单元格内文本居中显示”

  1. 文字头像吧说道:

    关注下了哈。