当前位置: 首页 > Web前端 > CSS

仿segmentfault-table水平滚动

时间:2023-03-30 19:26:28 CSS

问题描述在移动端访问我的博客时,如果table的列数足够大,会显示不完整,如下图红圈所示.方法是在桌子上放一个table-wrap,如下图蓝底红圈所示。首先,我想到直接在桌子上放一个桌巾。然后当我查看其他表时,我发现并不是每张表都用table-wrap包裹着。table-wrap,如下图所示,也就是说只有不完整的表格才会被table-wraptable覆盖。什么是显示不全?即表格的宽度>文章的宽度通过上面的分析,我们可以得出一个简单的步骤:获取文章的宽度(articleWidth)获取所有的表格找到比文章宽度宽的表格,使其被包裹起来通过.table-wrapletarticleWidth=document.getElementById('article').clientWidth;让表=$('表');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/...