當超寬表格遇上手機直式螢幕

2025-10-13 10:52 PM

前天跟大家分享了我養的牛牛，很快就接到網友 ycs77 回饋，提到現有介面用手機直式顯示時排版會亂掉且不易閱讀，還幫忙微調樣式發了 PR，好一位充滿行動力的熱血同學，RESPECT!

這些年來，行動裝置客戶端的比例逐年上升，連我部落格這種以工作參考為主的網站，理論上最大客源來自上班遇到茶包爬文(話說，自後 LLM 興起部落格流量也跟著一路下滑 Orz 問 AI 直接有答案，誰還開網站？)，但近年來桌機仍是最大宗，但行動裝置的比例也常維持在 30% ~ 40% 之間，成為不可忽視的一群。

實際用手機測了一下，目前的介面完全沒考量到行動裝置直式螢幕，標題與關鍵字欄位跑版不說，結果表格寬度超出螢幕，需要上下左右滑，一整個不專業。

thumbnail

我不想為手機版另外設計一套排版，希望依據寬度切換樣式就能輕鬆搞定，但我的前端技能只有半調子，對 RWD 也沒啥研究... 以前走到這步通常要卡關卡很久，但現在有 Github Copilot 在手，相當於有精通前端設計的神隊友，這樣還搞砸神仙難救!

Copilot 給了三種建議：改為卡片式佈局(Card Layout)、加上水平捲軸、隱藏次要欄位縮短寬度，在我的經驗裡卡片式佈局應是最專業最常見的設計方式，也是 Copilot 最推薦的做法。

然後，用點小技巧，TABLD/TR/TD 結構可以完全不用動。主要原理是使用 @media (max-width: 768px) 針對寬度 768px 以下改用另一組樣式，有幾個重點：

上方標題及文字欄位改用 flex 直式排列
將 table, tr, td 都改成 display: block
tbody 設定 display: grid，讓 tr 以網格排列，配合 grid-template-columns: repeat(2, 1fr); (重複兩次，每次 1 fraction unit) 設定兩欄
英文改藍字、字型加大、粗體
英文以外的中文 td，設定 td::before 在前方用 content: attr(data-label) 顯示 data-label Attribute 值 (zh-tw|zh-cn|zh-hk|zh-sg|zh-mo|zh-my)
zh-tw/zh-cn 以外的中文 td 用 Vue :class="{'empty': !term.hk}" 設定沒有內容時加上 empty 樣式，再將 .empty 設成 display: none 隱藏

/* 寬度小於 768px 時啟用卡片式佈局 */
@media (max-width: 768px) {
    header {
        /* 改為直向排列 */
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;

        h1 {
            font-size: 1.3em;
            margin: 0;
        }
        /* 說明連結改為右上角 */
        .doc {
            position: absolute;
            top: 6px;
            right: 12px;
            z-index: 100;
        }
    }
    /* 參照來源位置微調 */
    .content .ref {
        margin-top: 12px;
        text-align: left;
        font-size: 80%;
    }
    /* 隱藏表格標題列 */
    table thead {
        display: none;
    }

    /* 將表格、列與欄都轉換為 Block 排版 */
    table {
        display: block;
         tbody, tr, td {
            display: block;
        }
    }

    /* tr 使用 Grid 佈局，並設定成兩欄顯示 */
    table tbody {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    /* tr 樣式設計成一張卡片 */
    table tr {
        margin-bottom: 0;
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 12px;
        background: white;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    }
    
    table td {
        border: none;
        padding: 2px 0;
        text-align: left;
        position: relative;
        padding-left: 64px;
        min-height: 1.2em;
    }

    /* 在每個儲存格前顯示欄位標籤 */
    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 64px;
        font-weight: bold;
        color: #666;
        font-size: 0.9em;
    }
    /* 英文欄位：藍色、字體放大、粗體 */
    table td.en {
        font-size: 1.1em;
        font-weight: bold;
        padding-left: 0;
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid #eee;
        /* 前方不需標籤 */
        &::before {
            display: none;
        }
    }

    /* 針對相同值樣式調整 */
    table tr.same td.tw,
    table tr.same td.cn {
        opacity: 0.5;
        font-style: italic;
    }
    /* 隱藏空白欄位(zh-hk...) */
    table td.empty {
        display: none;
    }
}

嗯，不能跟專業設計比，但比表格好看好用多了。中文計算機術語速查工具