问题描述
自己的博客在用移动端访问时，如果 table 的列数足够多会显示不全，如下图红圈所示
正常情况如图
解决过程
使用 chrome 发现 segmentfault 的解决方法是在 table 上套一个 table-wrap，如下图蓝色背景和红圈所示
首先想到直接在 table 上套一个 table-wrap 即可接着查看别的 table 时发现并不是每一个 table 都被套上一个 table-wrap，如下图所示，也就是说只有显示不全的 table 才会套上 table-wrap
table 什么情况是显示不全？那就是 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/…