仿segmentfault-table横向滚动

GitChat 发布于2019-08-02 11:24 / 750人阅读

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

问题描述

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

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

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

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

仿segmentfault-table横向滚动

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

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

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

ctriptech 2019-08-23 11:40 评论0 收藏0
UI仿写

摘要：像微信一样的图片选择器像微信一样的图片选择器像微信一样录制视频和音频重构史上最牛逼的音乐播放器仿网易云音乐已开源无论是下载模块，还是换肤模块，还是炫丽的界面通讯录顶部固定的索引效果通讯录和城市列表展示时通用的滑动顶部固定的索引列表效果 Android 仿京东、天猫 app 的商品详情页的布局架构, 以及功能实现仿京东、天猫 app 的商品详情页自定义 viewgroup+viewd...

frontoldman 2019-06-25 11:46 评论0 收藏0
UI仿写 - 收藏集 - 掘金

摘要：启动页旅行云阅一个仿网易云音乐，使用及豆瓣开发的开源项目掘金一款基于网易云音乐，使用及豆瓣开发的符合阅读类的开源项目。 Android 仿今日头条的开源项目 - Android - 掘金起因看到众多大神纷纷有了自己的开源项目，于是自己琢磨着也想做一个开源项目来学习下，因为每次无聊必刷的app就是今日头条，评论简直比内容都精彩，所以我打算仿今日头条来练练手，期间也曾放弃过，也遇到很多坑...

AlienZHOU 2019-06-25 11:17 评论0 收藏0
控件 - 收藏集 - 掘金

摘要：它也是一款可以帮助你轻松实现侧滑效果的控件掘金一个灵活易用可以帮助开发者实现侧滑效果的开源项目。直接上图站多媒体选择器掘金基于模式的多媒体选择器。 Android 开源库 V - Layout：手把手带你分析淘宝、天猫都在用的 UI 框架 - Android - 掘金前言 V- Layout 是阿里出品的基础 UI 框架，用于快速实现页面的复杂布局，在手机天猫 Android版内广...

sixgo 2019-06-25 11:25 评论0 收藏0