如何为Blogger平台发布的文章内表格添加滚动效果

方案1：单独给指定表格加滚动容器（无需修改原有表格内容） #

仅需要给现有表格套一层外层容器代码，原有表格的所有内容、样式完全不用调整：

<div style="overflow-x: auto; width: 100%; margin: 12px 0;">
<!-- 把你原来的<table>到</table>的完整表格代码放在此处即可 -->
</div>

overflow-x: auto属性会自动识别表格宽度，当表格宽度超出当前屏幕的内容区宽度时，自动生成横向滚动条，用户可以左右滑动查看完整表格内容。

方案2：全局配置所有表格自动适配移动端（无需修改单篇文章内容） #

如果站点内有多个参数表格，可以直接给Blogger模板加全局CSS规则，所有已发布、后续发布的表格都会自动适配移动端：

• 进入Blogger后台，依次点击「主题」→「自定义」→「高级」→「添加自定义CSS」
• 粘贴如下CSS代码后保存即可：

.post-body table {
  display: block;
  overflow-x: auto;
  width: 100%;
}

异常排查 #

如果添加代码后未生效，大概率是模板自带的表格默认样式优先级更高，给对应样式加!important提升优先级即可，示例：

.post-body table {
  display: block !important;
  overflow-x: auto !important;
}

添加完成后可以用浏览器的移动端调试模式，或者直接用手机访问站点测试滚动效果即可。

内容的提问来源于stack exchange，提问作者Benedict Onyeka