html横向table,仿segmentfault-table横向滚动

问题描述

自己的博客在用移动端访问时，如果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上多一点