仿segmentfault-table横向滚动

问题描述

自己的博客在用移动端访问时，如果table的列数足够多会显示不全，如下图红圈所示

正常情况如图

解决过程

使用chrome发现segmentfault的解决方法是在table上套一个table-wrap，如下图蓝色背景和红圈所示

首先想到直接在table上套一个table-wrap即可
接着查看别的table时发现并不是每一个table都被套上一个table-wrap，如下图所示，也就是说只有显示不全的table才会套上table-wrap

table什么情况是显示不全？
那就是table的宽度 > 文章的宽度

通过以上分析可以得出简单的步骤：

1. 获取文章的宽度(articleWidth)
2. 获取所有的table
3. 找出比articleWidth宽的table
4. 使其被.table-wrap包囊

    let articleWidth = document.getElementById('文章').clientWidth;
    let tables = $('table');
    
    tables.each((index, table) => {
        if (table.clientWidth > articleWidth) {
            table.outerHTML = "<div class='table-wrap'>" + table.outerHTML + "</div>";
        }
    });

别忘了补上css

.table-wrap{
  overflow-x: scroll;
}

其实不用判断table的宽度 > 文章的宽度也能实现，让每一个table都套上.table-wrap，使用如下css

.table-wrap{
  overflow-x: auto;
}

这样的话只是会在html上多一点<div class="table-wrap"></div>而已，并且当页面大小发生变化也会根据需要是否出现滚动条

实际效果用移动端或者chrome模拟移动端看https://lierabbit.cn/2018/05/...
原文链接：https://lierabbit.cn/2018/09/...