问题描述
自己的博客在用移动端访问时,如果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 = "
" + table.outerHTML + "
";
}
});
别忘了补上css
.table-wrap{
overflow-x: scroll;
}
其实不用判断table的宽度 > 文章的宽度也能实现,让每一个table都套上.table-wrap,使用如下css
.table-wrap{
overflow-x: auto;
}
这样的话只是会在html上多一点