仿segmentfault-table橫向滾動

問題描述

本身的博客在用移動端訪問時，若是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/...