不只好看還要好讀！設計師必懂的表格 RWD 爆版修正術

在切版的時候，設計師或前端工程師最怕遇到的一幕，就是原本在桌機版看起來整齊又漂亮的表格，一到手機版就整個「爆版」。字被擠到看不清楚、畫面被撐到需要左右滑動，甚至直接破壞了整體排版。這不只是視覺上的問題，還會讓使用者體驗大打折扣。對客戶來說，表格明明是用來呈現資訊的，結果變成誰也看不懂的一團亂。

為什麼表格在手機上容易爆版？

從前端切版的角度來看，<table> 本身就是一個「固定結構」的元素，它的欄位會根據內容撐開，沒有自動換行或縮排的彈性。當表格裡塞了太多欄位、文字過長，或是設計稿沒考慮到行動版的斷點規劃，手機小螢幕就無法正常容納，直接導致「爆版」。

另外，工程實務上也常見 路徑設定錯誤 造成排版跑掉，例如 CSS 或 JS 沒有正確載入，就可能讓整個畫面看起來崩壞。如果你有遇過這種情況，可以參考我們另一篇文章 👉 Laravel 網站破版怎麼辦？CSS 與 JS 路徑錯誤完整解決辦法，裡面有更完整的解法。

這樣的問題不只影響設計呈現，更牽涉到 SEO。Google 在行動優先索引（Mobile-First Indexing）時，會直接以手機版作為主要排名依據。如果表格內容在手機端難以閱讀，使用者快速關閉頁面，跳出率一高，就會讓網站排名和信任度一起被拉低。

解法一：橫向滑動設計

最直覺的處理方式，就是讓表格在手機版「可以左右滑動」。
這樣能保留完整的表格結構，不需要刪減資訊，用戶只要手指滑動就能看到全部欄位。

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 提升 iOS 裝置滑動體驗 */
}

.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap; /* 避免換行造成排版跑掉 */
}

HTML 使用方式：

<div class="table-wrapper">
  <table>
    <tr>
      <th>產品名稱</th>
      <th>規格</th>
      <th>價格</th>
      <th>庫存</th>
    </tr>
    <tr>
      <td>商品 A</td>
      <td>500ml</td>
      <td>$200</td>
      <td>有貨</td>
    </tr>
  </table>
</div>

👉 這種方式能快速止血，但也有缺點：當表格欄位非常多時，用戶還是得滑很久才能看完所有資訊，對閱讀效率會有影響。

解法二：卡片式 RWD 設計

如果表格是網站的核心資訊（例如商品規格、價目表、比較表），單純橫向滑動可能會讓使用者覺得麻煩。
這時候就可以用 卡片式設計，讓表格在手機版自動「拆解」成一張張卡片，欄位名稱與內容對齊，方便使用者上下滑動閱讀。

/* 桌機版維持正常表格 */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

/* 手機版以下改成卡片式 */
@media (max-width: 768px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
  }

  .responsive-table thead {
    display: none; /* 隱藏原本表頭 */
  }

  .responsive-table tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    background: #fafafa;
  }

  .responsive-table td {
    border: none;
    position: relative;
    padding-left: 50%;
  }

  .responsive-table td:before {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 45%;
    font-weight: bold;
    white-space: nowrap;
    content: attr(data-label); /* 使用 data-label 來顯示欄位名稱 */
  }
}

HTML 範例：

<table class="responsive-table">
  <thead>
    <tr>
      <th>產品名稱</th>
      <th>規格</th>
      <th>價格</th>
      <th>庫存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="產品名稱">商品 A</td>
      <td data-label="規格">500ml</td>
      <td data-label="價格">$200</td>
      <td data-label="庫存">有貨</td>
    </tr>
  </tbody>
</table>

👉 這樣切換後，在桌機版看還是標準表格，但到手機版時會變成「卡片式區塊」，用戶滑動就能快速讀懂每筆資料。

如果你對 RWD 的整體規劃還不太熟悉，可以延伸閱讀我們的教學 👉 RWD 是什麼？Google 最愛的行動優先網站設計策略，更全面理解響應式設計的核心。

設計與 SEO 的雙贏

作為設計師或前端工程師，處理表格的 RWD，不只是「畫面好不好看」的問題，更直接影響到使用者體驗與 SEO。

從 SEO 的角度來說，Google 在行動優先索引（Mobile-First Indexing）時，特別注重「可讀性」與「互動性」。一旦表格在手機版爆版，使用者體驗下降，跳出率就會提高，最終不只設計失分，也會讓排名與轉換率受到影響。

FAQ 常見問題