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表格可以自适应所在位置的宽度
宽表格太常见了,尤其现在是个智能手机当道的年代,尽管表格会自适应,并且允许横向滚动,但是偶尔会遇到超出边界的情况,这个时候就需要手动添加代码了。
首先要,安装tablepress 自适应扩展,https://tablepress.org/extensions/responsive-tables/
然后,在引用表格的时候,要写成
除了scroll之外,还有3种自适应模式,可以在上面的链接查看。请注意,其他3个模式下,不要对表格使用自定义宽度,否则会乱掉;
6 滚动时冻结/锁定表格的首列
首列也就是左1列,
如果需要固定左侧2列,就把最后的1改成2即可;也支持同时固定左侧和右侧列,只滚动中间的列。
然而对某个表格的首列锁定之后,再滚动其他列,会带来一个问题,就是首列底部也会出现一个横向的滚动条,暂时不知道怎么解决。
以上就是我自己在日常工作中,用到tablepress的时候常用的几种代码和css设置了
另外,
- 有别人整理的 常用tablepress css设置 mark一下
- 涉及到复杂表格的内容,完全可以做成pdf,放在网上让客人点击,简单省事,增加了网站互动度。