仿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 = "<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横向滚动的更多相关文章
- 仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥……我的那个个人博客做好了-->(我的博客)<--.嘿嘿 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下, ...
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
- dede图片横向滚动
<div id=demo style="overflow:hidden; width:960px;" > <table border=0 align=" ...
- 一款兼容IE6并带有多图横向滚动的jquery特效
一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...
- 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView
李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView 11111222
- 李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView
李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView (VTmagic是一个实现左右滚动的控制器的框架,也可以实现此功能) 实现的效果: 01 - 创建四个控制器 02 - 定义需要 ...
- 李洪强实现横向滚动的View<二>
上一节中我们已经实现了一个带有图片,标题和价格label 的UIView 这节我们用这个view实现一个横向滚动的UIcollectionView 实现的效果如下: 01 - 创建CFTyreScr ...
- js实现文字横向滚动
页面布局 <div id="scroll_div" class="fl"> <div id="scroll ...
- Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》
Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...
- 使用elementUI滚动条之横向滚动
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...
随机推荐
- HttpServletReqeust、HttpServletResponse
HttpServletRequest:一次来自客户端的请求的相关信息 请求行 request.getMethod() 获取http请求方式 request.getR ...
- 吴裕雄--天生自然python机器学习:K-近邻算法介绍
k-近邻算法概述 简单地说,谷近邻算法采用测量不同特征值之间的距离方法进行分类. 优 点 :精度高.对异常值不敏感.无数据输入假定. 缺点:计算复杂度高.空间复杂度高. 适用数据范围:数值型和标称型. ...
- Python的lambda学习
lambda可以简化简单循环,如下: def fc1(x): return x + 10 print "fc1(23) = ", fc1(23) y = lambda x: x+1 ...
- HTTP Status 400,400 (Bad Request)
400 (Bad Request) 点击添加按钮转跳没反应,控制台没报错,然后在Chrome上检查发现报错了 百度了一下,发现http Status 400这个错误大多是因为,jsp的form表单提交 ...
- Error、Bias、Variance及损失函数理解
个人感觉理解误差.偏置.方差的一个好的解释,感谢分享:https://baijiahao.baidu.com/s?id=1601092478839269810&wfr=spider&f ...
- 方差分析||MSA/MSE|
应用统计学-方差分析 数值型数据使用线性回归来研究因素对因变量的影响.类别型数据使用方差分析来研究因素对因变量的影响.方差分析是使用方差比MSA/MSE来检验均值是否全相等,即相等是H0假设,而不全相 ...
- python学习笔记(5)数据类型-字典
字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值 key=>value 对用冒号 : 分割,每个键值对之间用逗号 , 分割,整个字典包括在花括号 {} 中 ,格式如下所示: d ...
- 关于php自学
自己本人现在正在自学php有一段时间了,不知道现在的学习状态咋样,在我看来应该属于不算很糟糕,但有点糟糕的状态. 如果算学习自学php的话,现在断断续续应该是有5个月了,按理说是差不多可以做出独立项目 ...
- Mysql的分页查询语句的性能分析
MySql分页sql语句,如果和MSSQL的TOP语法相比,那么MySQL的LIMIT语法要显得优雅了许多.使用它来分页是再自然不过的事情了. 1.1最基本的分页方式: 在中小数据量的情况下,这样的S ...
- php--小数点问题
1.用round去小数点后两位时,有时候会出现很长的小数解决方法 sprintf("%.2f",round($total_fee,2)); 使用sprintf再截取一遍.出现变态小 ...