資訊專(zhuān)欄INFORMATION COLUMN
摘要：?jiǎn)栴}描述自己的博客在用移動(dòng)端訪問(wèn)時(shí)，如果的列數(shù)足夠多會(huì)顯示不全，如下圖紅圈所示正常情況如圖解決過(guò)程使用發(fā)現(xiàn)的解決方法是在上套一個(gè)，如下圖藍(lán)色背景和紅圈所示首先想到直接在上套一個(gè)即可接著查看別的時(shí)發(fā)現(xiàn)并不是每一個(gè)都被套上一個(gè)，如下圖所示
問(wèn)題描述
自己的博客在用移動(dòng)端訪問(wèn)時(shí)，如果table的列數(shù)足夠多會(huì)顯示不全，如下圖紅圈所示
正常情況如圖
解決過(guò)程使用chrome發(fā)現(xiàn)segmentfault的解決方法是在table上套一個(gè)table-wrap，如下圖藍(lán)色背景和紅圈所示
首先想到直接在table上套一個(gè)table-wrap即可
接著查看別的table時(shí)發(fā)現(xiàn)并不是每一個(gè)table都被套上一個(gè)table-wrap，如下圖所示，也就是說(shuō)只有顯示不全的table才會(huì)套上table-wrap
table什么情況是顯示不全？
那就是table的寬度 > 文章的寬度
通過(guò)以上分析可以得出簡(jiǎn)單的步驟：
獲取文章的寬度(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 + "";
}
});
別忘了補(bǔ)上css
.table-wrap{
overflow-x: scroll;
}
其實(shí)不用判斷table的寬度 > 文章的寬度也能實(shí)現(xiàn)，讓每一個(gè)table都套上.table-wrap，使用如下css
.table-wrap{
overflow-x: auto;
}
這樣的話只是會(huì)在html上多一點(diǎn)而已，并且當(dāng)頁(yè)面大小發(fā)生變化也會(huì)根據(jù)需要是否出現(xiàn)滾動(dòng)條
實(shí)際效果用移動(dòng)端或者chrome模擬移動(dòng)端看https://lierabbit.cn/2018/05/...
原文鏈接：https://lierabbit.cn/2018/09/...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97300.html
摘要：?jiǎn)栴}描述自己的博客在用移動(dòng)端訪問(wèn)時(shí)，如果的列數(shù)足夠多會(huì)顯示不全，如下圖紅圈所示正常情況如圖解決過(guò)程使用發(fā)現(xiàn)的解決方法是在上套一個(gè)，如下圖藍(lán)色背景和紅圈所示首先想到直接在上套一個(gè)即可接著查看別的時(shí)發(fā)現(xiàn)并不是每一個(gè)都被套上一個(gè)，如下圖所示 問(wèn)題描述 自己的博客在用移動(dòng)端訪問(wèn)時(shí)，如果table的列數(shù)足夠多會(huì)顯示不全，如下圖紅圈所示 showImg(https://segmentfault.c...
摘要：?jiǎn)栴}描述自己的博客在用移動(dòng)端訪問(wèn)時(shí)，如果的列數(shù)足夠多會(huì)顯示不全，如下圖紅圈所示正常情況如圖解決過(guò)程使用發(fā)現(xiàn)的解決方法是在上套一個(gè)，如下圖藍(lán)色背景和紅圈所示首先想到直接在上套一個(gè)即可接著查看別的時(shí)發(fā)現(xiàn)并不是每一個(gè)都被套上一個(gè)，如下圖所示 問(wèn)題描述 自己的博客在用移動(dòng)端訪問(wèn)時(shí)，如果table的列數(shù)足夠多會(huì)顯示不全，如下圖紅圈所示 showImg(https://segmentfault.c...
閱讀 3829·2021-10-12 10:11
閱讀 3648·2021-09-13 10:27
閱讀 2555·2019-08-30 15:53
閱讀 1983·2019-08-29 18:33
閱讀 2198·2019-08-29 14:03
閱讀 1004·2019-08-29 13:27
閱讀 3327·2019-08-28 18:07
閱讀 796·2019-08-26 13:23
