tablepress 常用css代码

总阅读量 601 , 今日阅读量 4 

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

以下代码放在 tablepress的 plugin option -Custom CSS 里面即可,(如果你用了wpbakery或者其他编辑器,很有可能需要把代码放入编辑器的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表格可以自适应所在位置的宽度

images宽表格太常见了,尤其现在是个智能手机当道的年代,尽管表格会自适应,并且允许横向滚动,但是偶尔会遇到超出边界的情况,这个时候就需要手动添加代码了。

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

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

[table id=123 responsive=scroll/]

除了scroll之外,还有3种自适应模式,可以在上面的链接查看。请注意,其他3个模式下,不要对表格使用自定义宽度,否则会乱掉;

 

 

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

首列也就是左1列,

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

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

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

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

 

另外,

  1. 有别人整理的 常用tablepress css设置 mark一下
  2. 涉及到复杂表格的内容,完全可以做成pdf,放在网上让客人点击,简单省事,增加了网站互动度。

 

Leave a Reply

Your email address will not be published. Required fields are marked *