仿segmentfault-table横向滚动

ctriptech 发布于2019-08-23 11:40 / 3360人阅读

摘要：问题描述自己的博客在用移动端访问时，如果的列数足够多会显示不全，如下图红圈所示正常情况如图解决过程使用发现的解决方法是在上套一个，如下图蓝色背景和红圈所示首先想到直接在上套一个即可接着查看别的时发现并不是每一个都被套上一个，如下图所示

问题描述

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

而已，并且当页面大小发生变化也会根据需要是否出现滚动条

实际效果用移动端或者chrome模拟移动端看https://lierabbit.cn/2018/05/...
原文链接：https://lierabbit.cn/2018/09/...

云服务器 GPU云服务器 listview横向滚动 js文字横向滚动 asp表格横向滚动 js仿ios滚动条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97300.html

仿segmentfault-table横向滚动

摘要：问题描述自己的博客在用移动端访问时，如果的列数足够多会显示不全，如下图红圈所示正常情况如图解决过程使用发现的解决方法是在上套一个，如下图蓝色背景和红圈所示首先想到直接在上套一个即可接着查看别的时发现并不是每一个都被套上一个，如下图所示问题描述自己的博客在用移动端访问时，如果table的列数足够多会显示不全，如下图红圈所示 showImg(https://segmentfault.c...

ninefive 2019-08-29 16:36 评论0 收藏0
仿segmentfault-table横向滚动

摘要：问题描述自己的博客在用移动端访问时，如果的列数足够多会显示不全，如下图红圈所示正常情况如图解决过程使用发现的解决方法是在上套一个，如下图蓝色背景和红圈所示首先想到直接在上套一个即可接着查看别的时发现并不是每一个都被套上一个，如下图所示问题描述自己的博客在用移动端访问时，如果table的列数足够多会显示不全，如下图红圈所示 showImg(https://segmentfault.c...

GitChat 2019-08-02 11:24 评论0 收藏0