tablepress 常用css代码

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/ 然后,在引用表格的时候,要写成 [table id=123 responsive=scroll/] 除了scroll之外,还有3种自适应模式,可以在上面的链接查看。请注意,其他3个模式下,不要对表格使用自定义宽度,否则会乱掉;     6 滚动时冻结/锁定表格的首列 首列也就是左1列, [table id=123 responsive=scroll datatables_fixedcolumns_left_columns=1 /] 如果需要固定左侧2列,就把最后的1改成2即可;也支持同时固定左侧和右侧列,只滚动中间的列。… Read moretablepress 常用css代码