tablepress 常用css代码

总阅读量 1 , 今日阅读量 1 

wordpress表格插件tablepress 免费可用,然而默认的样式改起来需要查阅英文documentation,稍微有些难度,这里整理一下自己常用的几个:

以下代码放在 tablepress的 plugin option -Custom CSS 里面即可;

1 改变所有的tablepress表格的行高

行高决定因素有3个,一个是字号,一个是行间距,当这2者都不需要改变的时候,改变padding是最直观的办法。

.tablepress td {
padding: 1px 2px !important; line-height: 1.3em; /*行高*/
font-size: 14px; /*字号*/
}

如果不需要对所有表格应用该样式,只针对某个表格01设置,只需要把 .tablepress td 改成 .tablepress-id-01 td 即可。

2 tablepress所有的表格的宽度自动最小,不要满宽

/*自适应宽度*/
.tablepress {
width: auto;
margin: 0 auto 1em;
}

3 Tablepress表格如何指定某列的宽度

也是在option里面写css

.tablepress-id-123 .column-1,
.tablepress-id-123 .column-2
{
min-width: 90px !important;
}

注意点:第一行最后有个逗号,第二行是没有逗号的。

4 怎么为tablepress表格的某行设置背景色?

在option里面写css

.tablepress-id-123 .row-11 td,
.tablepress-id-123 .row-12 td
{
background-color: #0000ff;
color: #ffffff;
}

上面3+4内容,包含了行和列的选择,合起来就是选择单元格;比如下面选择的是第11行,第二列的单元格,相当于excel中的B11。

.tablepress-id-123 .row-11 .column-2

然而想选择一块区域太麻烦了。


下面是引用表格的时候相关的设置

5 让tablepress表格可以滚动

宽表格太常见了,尤其现在是个智能手机当道的年代,表格的自适应效果差强人意,设置为滚动稍微可以好看一点

首先要,安装tablepress 自适应扩展,https://tablepress.org/extensions/responsive-tables/

然后,在引用表格的时候,要写成

[table id=123 responsive=scroll/]

除了scroll之外,还有4种自适应模式,可以在上面的链接查看。

6 滚动时冻结/锁定表格的首列

首列也就是左1列,

[table id=123 responsive=scroll datatables_fixedcolumns_left_columns=1 /]

如果需要固定左侧2列,就把最后的1改成2即可;也支持同时固定左侧和右侧列,只滚动中间的列。

然而对某个表格的首列锁定之后,再滚动其他列,会带来一个问题,就是首列底部也会出现一个横向的滚动条,暂时不知道怎么解决。

以上就是我自己在日常工作中,用到tablepress的时候常用的几种代码和css设置了

另外,有别人整理的 常用tablepress css设置 mark一下

 

发表评论

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