仿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/...