跳至主要内容

WP Table Manager:表格样式设置

1. 格式

在工具栏中,您可以设置单元格样式,例如:字体、字号、文本样式、单元格背景颜色、文本颜色、单元格水平和垂直对齐方式等。这些设置可以应用于单个单元格或多个单元格。

 

样式表

 

您可以选择表格编辑器的百分比。这意味着您可以放大/缩小表格,范围从 50% 到 200%。.

 

放大缩小

 

行高和列宽可以以像素为单位进行设置。请依次点击“菜单格式”>“应用列/行大小” ,然后选择“调整列宽”/“调整行宽” 。在弹出的窗口中,您可以选择范围并设置列或行的像素值。点击“完成”按钮即可。

 

调整列大小

 

2. 主题和选项

在每个表格中,您都可以在“菜单主题”中找到主题选择选项只需点击主题即可应用。

应用主题会替换表格内的所有数据和样式。因此,正确的做法是先应用一个主题,然后编辑数据创建自己的主题,最后复制表格。.

 

主题选择

交替颜色

“菜单主题”>“备选颜色页眉样式页脚样式为表格线条着色。您可以选择模板样式,也可以在插件设置中创建自定义样式。

 

主题更改颜色

 

右键菜单中的“移除 > 移除自动样式”来移除备用颜色

 

移除交替颜色

 

表格对齐

表格对齐方式用于调整包含整个表格的 div 元素的对齐方式,例如使整个表格居中。您可以在“菜单格式”>“表格对齐”

 

表格对齐

单元格高亮

单元格高亮显示也是一个可选功能。您可以在配置中启用此功能。默认情况下,此功能处于禁用状态。您可以选择要高亮显示的行,并调整高亮显示的颜色和不透明度。.

 

表格高亮显示

 

3. 在单元格上添加工具提示

在表格的每个单元格上,右键单击即可看到“添加工具提示”选项。.

 

添加工具提示

 

您可以以像素为单位设置工具提示的宽度。这将打开一个带有编辑器的工具提示页面供您编辑。.

 

工具提示编辑器

 

添加内容并保存,就完成了,鼠标悬停时会在公开页面上显示工具提示。.

 

工具提示悬停

 

4. 行列式冷冻

柱式冷冻

列冻结功能位于“菜单格式”>“响应式选项”。您最多可以冻结 5 列,从第一列开始计数。

 

冷冻柱

 

要使列/行冻结,还有一个额外的选项可以让你固定表格的高度(因为你的表格容器可能具有无限的高度)。.

 

桌子高度

 

选择要冻结的列后,您可以在表格中滚动并始终显示固定的列。.

 

固定行显示

 

行冻结

“菜单格式”>“表格标题”中找到它,从这里您可以启用该选项并设置要冻结的行(最多 5 行)。

 

行冻结表头

 

如果要设置表格高度,请返回响应式选项。

然后,根据设置,前端将冻结第一行。.

 

行冻结

 

5. 排序和筛选

如果要对表格进行排序或筛选,请导航至“菜单格式”>“排序和筛选”选项。

 

排序筛选

 

然后会弹出一个包含排序和筛选选项的窗口。. 

 

筛选排序弹出窗口

 

如果要对表格进行排序,只需启用前端排序选项即可。您可以选择默认排序的列及其排序方向。

例如,在这种情况下,选择A 列并按升序排列。

 

排序选项

 

筛选条件有两种选择:

 

筛选选项

 

  • 列内筛选:您可以在每列的标题处筛选数据。切换按钮可帮助您显示或隐藏标题处的搜索字段。

 

列内筛选

 

  • 高级筛选表单:选中此选项后,您可以在表格中搜索和筛选数据。

 

高级过滤器

 

主搜索:启用此功能后,前端将添加一个搜索输入框。用户可以通过该输入框轻松搜索表格中的所有数据。

 

主搜索

 

6. 单元格内边距和边框圆角

您可以在工具栏上找到边框图标,它可以帮助您调整单元格的内边距和边框半径。.

 

内边距

 

请注意,如果您应用了主题,系统会自动添加一些自定义 CSS。当然,您仍然可以对其进行编辑。.

 

7. 自定义 CSS

我们再进一步。如果您是一位具备 CSS 技能的网页设计师,您可以在“菜单格式”>“自定义 CSS”中添加 CSS 代码。

 

格式化自定义 CSS

 

CSS 代码使用代码镜像进行着色,也可以用 Less CSS 编写,效果也一样好!

 

自定义表格 CSS

 

单元格、行和列都有坐标,用于识别每个元素并应用自定义 CSS。R 代表行,C 代表列。.

 

css显示

 

8. 响应式 WordPress 表格

我的表格在小屏幕上是响应式的还是使用滚动条?

隐藏列

WP Table Manager提供了一个优先级工具来处理响应式设计,但这只是其中一个选项。默认情况下,响应式功能处于禁用状态,因此会出现溢出(不过在移动设备上效果很好)。要使用“隐藏列”选项,您应该转到“菜单格式”>“响应式选项”。

 

响应式隐藏列

 

响应式模式功能强大,您可以设置移动端尺寸下列的隐藏优先级。列隐藏时,会显示一个带有复选框的移动菜单,用于强制显示/隐藏列。
表格编辑过程中列宽固定。如果所有列的宽度都超过容器大小,则会出现溢出,您可以在移动设备上轻松滚动页面。

带滚动条的表格(更适合列数较少的情况)

 

响应式表格滚动

 

隐藏列的表格(更适合列数较多的情况)

 

57bb0cb0ac948

 

重复标题

如果您想在网站的较小区域插入表格,这是另一种选择。您应该导航至“菜单格式”>“响应式选项”,然后选择“响应式类型”>“重复标题”。

 

重复标题

 

我们将根据您的需求提供定制选项:

  • 响应式断点(像素):选择一个像素断点值,以定义表格何时切换到此响应式模式。
  • 响应式最大高度(像素):启用响应式模式后,根据断点值定义最大高度,以避免表格过长。
  • 响应式模式样式:为此响应式模式应用默认样式,或使用表格颜色。

之后,您就可以看到表格在前端的显示效果了。.

 

重复的头部前端

 

如果您使用重复标题并且筛选选项,则可以在移动视图的文本框中键入内容进行筛选。

 

过滤重复标题

 

9. 导出到 Excel

要将表格保存到您的电脑上,您应该转到“菜单表格” 然后单击“导出 Excel”按钮选项。导出后,前端生成的文件类型将为 *.xlsx。

 

导出Excel

 

10. 分页

“菜单格式”>“分页”找到此功能。使用切换按钮启用分页,并选择每页显示的行数。

 

分页-wptm

 

11. 单元格边框样式

您可以为表格应用边框类型,例如边框宽度、边框颜色和边框样式。首先,选择单元格区域,然后单击工具栏上的图标。.

 

边框样式

 

12. 在前端打印表格

有时,您需要打印表格。因此,为了在前端“打印”按钮“菜单”>“表格”,然后勾选“打印”按钮。

 

打印按钮