问题描述

自己的博客在用移动端访问时,如果table的列数足够多会显示不全,如下图红圈所示

正常情况如图

解决过程

使用chrome发现segmentfault的解决方法是在table上套一个table-wrap,如下图蓝色背景和红圈所示

首先想到直接在table上套一个table-wrap即可
接着查看别的table时发现并不是每一个table都被套上一个table-wrap,如下图所示,也就是说只有显示不全的table才会套上table-wrap

table什么情况是显示不全?
那就是table的宽度 > 文章的宽度

通过以上分析可以得出简单的步骤:

  1. 获取文章的宽度(articleWidth)
  2. 获取所有的table
  3. 找出比articleWidth宽的table
  4. 使其被.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/...

仿segmentfault-table横向滚动的更多相关文章

  1. 仿今日头条横向滚动导航栏--原生js

    咳咳!先打一波小广告,在上一篇里忘记了,那啥……我的那个个人博客做好了-->(我的博客)<--.嘿嘿 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下, ...

  2. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  3. dede图片横向滚动

    <div id=demo style="overflow:hidden; width:960px;" > <table border=0 align=" ...

  4. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

  5. 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView

    李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView 11111222

  6. 李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView

    李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView (VTmagic是一个实现左右滚动的控制器的框架,也可以实现此功能) 实现的效果:  01 - 创建四个控制器 02 - 定义需要 ...

  7. 李洪强实现横向滚动的View<二>

    上一节中我们已经实现了一个带有图片,标题和价格label 的UIView 这节我们用这个view实现一个横向滚动的UIcollectionView 实现的效果如下:  01 - 创建CFTyreScr ...

  8. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  9. Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》

    Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...

  10. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

随机推荐

  1. 吴裕雄--天生自然C语言开发:指针

    #include <stdio.h> int main () { int var1; ]; printf("var1 变量的地址: %p\n", &var1 ) ...

  2. 吴裕雄--天生自然C语言开发:存储类

    { int mount; auto int month; } { register int miles; } #include <stdio.h> /* 函数声明 */ void func ...

  3. D. Almost All Divisors

    We guessed some integer number xx. You are given a list of almost all its divisors. Almost all means ...

  4. laravel中用到的ServiceProvide

    路由 全局限制 如果你希望路由参数可以总是遵循正则表达式,则可以使用 pattern 方法.你应该在 RouteServiceProvider 的 boot 方法里定义这些模式: 1 2 3 4 5 ...

  5. 疯狂收集个人信息的谷歌,为何不像Facebook那样让人毛骨悚然?

    自从Facebook信息泄露丑闻事件发生后,互联网上的个人隐私及安全成为大众的"心病".而大众最讨厌的,是互联网企业收集自己的信息,因此都在积极讨伐这种行为.但他们却忘了,收集用户 ...

  6. C语言占位符(待完善)

    %c 读入一个字符 %s 读入一个字符串,遇到空格制表符或者换行符时结束. %d 读入一个十进制整数 %x或者%X   读入一个十六进制整数(读出时,%x:小写,%X:大写) %o   读入一个八进制 ...

  7. 安装与使用django-restframework

    django-restframework 一.安装与使用 1.安装 >: pip3 install djangorestframework 2.使用 在settings.py中注册: INSTA ...

  8. [LC] 165. Compare Version Numbers

    Compare two version numbers version1 and version2.If version1 > version2 return 1; if version1 &l ...

  9. Ubuntu16.04使用sublime text3编写C语言后,实现编译并自动调用bash终端运行程序

    实现编译并自动调用bash运行程序只需要新建自己的.build文件就OK 依次打开: tools->building system->new building system 后,把下面的内 ...

  10. 微信小游戏广告位iphonex底部适配问题

    最近在公司开发游戏,使用cocos creator做微信小游戏,遇到一个很恶心的问题,如图: 如图所示,微信的广告位被iphonex的底部bar给弹出了一点位置,没有靠在底部. 在这里不得不吐槽一下微 ...