仿segmentfault-table横向滚动

问题描述自己的博客在用移动端访问时，如果table的列数足够多会显示不全，如下图红圈所示正常情况如图解决过程使用chrome发现segmentfault的解决方法是在table上套一个table-wrap，如下图蓝色背景和红圈所示首先想到直接在table上套一个table-wrap即可接着查看别的table时发现并不是每一个table都被套上一个table-wrap，如下图所示，也就是说只有显示不全的table才会套上table-wraptable什么情况是显示不全？那就是table的宽度 > 文章的宽度通过以上分析可以得出简单的步骤：获取文章的宽度(articleWidth)获取所有的table找出比articleWidth宽的table使其被.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/…