1.0 外贸网站表格展示样式功能升级改进 外贸老船长

通常网站表单的内容是产品的特征和参数，传达的价值比较大，所以做好对于提升网站页面优化质量很有帮助，为提升用户体验，老船长升级了表单的样式代码，让用户更加容易获取到表格的信息。

快捷导航

新升级的表格功能如下：

  • 1. 列数如果过多，超过页面内容，底部会自动出现横向滑动块；
  • 2. 如果表格超过页面66%，右侧会自动出现上下滑动块；
  • 3. 表格奇偶行显示不同背景颜色样式；
  • 4. 如果表格超过页面66%，右侧会自动出现上下滑动块；
  • 5. 手机端自适应体验更好，上下左右滑动展示；
  • 6. 可以自定义表格标题栏，包含背景及文字颜色；
  • 7. 当产生上下滑动的时候，表格标题栏会默认浮动在最上方；

升级后的表格如何使用：

从Excel里面复制到后台文本编辑里面即可。

需要注意清理表格样式，因为如果从Excel直接复制表格，会自带Excel的代码样式，导致页面排版不收控制，所以需要通过 Clean HTML 平台进行表格代码精简。

表格CSS代码精简方法：

将表格复制到HTML Cleaner 工具精简表格代码：https://html-cleaner.com

外贸网站表格CSS代码精简方法

如何设置表格的标题？

如果表格有标题行，可以手动将表格设置标题行，设置方法是进入 text 编辑模式，将第一行的<td>标签改成<th>即可。

注意在复制表格到网站之前，务必进行上面操作的“代码精简”。

a. 顶部栏目可以作为表格标题

外贸老船长网站表格样式升级

b. 进入Text模式，手动将第一个 tr 里的 td 改成 th

网站将表格定义第一行是标题行

c. 修改完成后表格标题会自动加载预设样式

网站设置标题th后自动添加预设好的样式

如果标题栏目的字体和背景色需要调整，跟老船长技术团队联系即可。

推荐阅读