iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 25
2
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 25 篇

【Day 25】HTML Table Responsive (RWD) 的幾種方法分享

12th鐵人賽 html css responsive table rwd
33402 瀏覽

  • 分享至 

  • xImage
    •  

types-of-responsive-tables
Visual examples of those four possibilities. by CSS-TRICKS

在製作表格時，最常遇到的狀況就是需要在各種螢幕上觀看，但有時單純的橫向捲軸，並未能 100% 提供好的使用者體驗。
本篇文章蒐集了幾種 HTML Table RWD 的方法，提供給需要的朋友。
CSS-TRICKS 也提供了四種 RWD Tables 解決方案，可以看看！

一、幫表格加入橫向捲軸

在較小的螢幕上，幫表格加入橫向捲軸（overflow-x），是最簡單的處理方式，css 程式碼如下：

table {
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

範例：Bootstrap - Responsive tables

首先需要讓 table 變成 block 區塊元素，再於水平方向的 overflow 讓表格自動判斷是否有超出寬度的內容，如有超出則自動加入水平捲軸（overflow-x: auto）。

white-space: nowrap 這個屬性是讓「文字不會自動斷行」，一定要下才有作用喔！

二、小螢幕使用 td:before 的方式顯示表格標題

這樣的方式適合手機版觀看，算是「破壞原本表格排版」的一種。
好處是每個內容都可以清楚對應到標題，缺點是手機版會拉得很長：

responsive-table-on-iphone-1
Responsive Data Tables by CSS-TRICKS

範例：

  1. CSS-Tricks - Codepen
  2. CSS-Tricks - Responsive Data Tables
  3. CSS Stars - Responsive Table Demo
  4. 筆者使用上述資料整理的 Codepen

HTML

<table id="responsive-table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Joining Date</th>
      <th>Total Experience</th>
      <th>Relevant Experience</th>
      <th>Date of Birth</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Marks</td>
      <td>Developer</td>
      <td>January 01, 2013</td>
      <td>5</td>
      <td>4</td>
      <td>June 30, 1985</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>Moody</td>
      <td>Developer</td>
      <td>December 15, 2012</td>
      <td>6</td>
      <td>6</td>
      <td>May 24, 1980</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Marks</td>
      <td>Developer</td>
      <td>January 01, 2013</td>
      <td>5</td>
      <td>4</td>
      <td>June 30, 1985</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>Moody</td>
      <td>Developer</td>
      <td>December 15, 2012</td>
      <td>6</td>
      <td>6</td>
      <td>May 24, 1980</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Marks</td>
      <td>Developer</td>
      <td>January 01, 2013</td>
      <td>5</td>
      <td>4</td>
      <td>June 30, 1985</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>Moody</td>
      <td>Developer</td>
      <td>December 15, 2012</td>
      <td>6</td>
      <td>6</td>
      <td>May 24, 1980</td>
    </tr>

  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
  border: 1px solid #cdcdcd;
  font: normal 12px arial;
  width: 100%;
}
td,
th {
  border: 1px solid #cdcdcd;
  padding: 8px;
}

@media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border-bottom: 2px solid #690461;
  }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50% !important;
    text-align: left !important;
  }

  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
  }

  td:nth-of-type(1):before {
    content: "First Name";
    color: #0e9893;
  }
  td:nth-of-type(2):before {
    content: "Last Name";
    color: #0e9893;
  }
  td:nth-of-type(3):before {
    content: "Job Title";
    color: #0e9893;
  }
  td:nth-of-type(4):before {
    content: "Joining Date";
    color: #0e9893;
  }
  td:nth-of-type(5):before {
    content: "Total Experience";
    color: #0e9893;
  }
  td:nth-of-type(6):before {
    content: "Relevant Experience";
    color: #0e9893;
  }
  td:nth-of-type(7):before {
    content: "Date of Birth";
    color: #0e9893;
  }
}

三、固定表格標題，讓表格內容橫向捲動

Collapse
By 如何讓CSS HTML Table RWD方法

這樣的方式不論手機版或電腦版都適合閱讀，也是「破壞原本表格排版」的一種。
但這樣的方式也有一個缺點：表格內容文字必須限制一行，若有兩行或以上將無法適用於此排版。

範例：Flor Antara - Codepen

四、小螢幕使用 data-title 顯示標題，並設定表格 display: block

https://ithelp.ithome.com.tw/upload/images/20201010/201078108DHUu4UB5y.png
↑ 電腦版顯示
https://ithelp.ithome.com.tw/upload/images/20201010/20107810IBkKB4krDh.png
↑ 手機版顯示

筆者的螢幕錄影.gif 一直無法連結到鐵人賽文章，不知道為何上面的可以，只好截兩張圖示意 ( ´;ω;` )

這是筆者目前使用率最高的解決方法，雖然對於內容較多的表格不適用（會需要下太多次 data-title），但以少內容的表格來說很適合手機版閱讀，且內容不限制一行或多行，也可以使用 ol、ul、li 都沒問題。

範例：筆者的 Codepen - Responsive Tables

HTML

<div class="table-wrapper">
  <table class="table">
    <thead>
      <tr>
        <th>水果</th>
        <th>餅乾</th>
        <th>飲料</th>
        <th>伴手禮</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="水果">
          <ul>
            <li>蘋果</li>
            <li>水蜜桃</li>
            <li>香蕉</li>
          </ul>
        </td>
        <td data-title="餅乾">
          <ul>
            <li>品客</li>
            <li>波卡</li>
            <li>孔雀餅乾</li>
            <li>浪味仙</li>
          </ul>
        </td>
        <td data-title="飲料">
          <ul>
            <li>珍珠奶茶</li>
            <li>烏龍拿鐵</li>
            <li>拿鐵咖啡</li>
            <li>奶蓋青茶</li>
          </ul>
        </td>
        <td data-title="伴手禮">
          <ul>
            <li>鳳梨酥</li>
            <li>乳酪蛋糕</li>
            <li>杏仁餅</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

/* ---------------------------- */
/*  Table Styles
------------------------------- */

.table-wrapper {
  margin: 50px;
  box-shadow: 0px 35px 50px rgba(27, 31, 49, 0.1);
}

.table {
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}

.table td,
.table th {
  text-align: center;
  padding: 10px;
}

.table td {
  border-right: 1px solid #f8f8f8;
}

/*  thead th color
------------------------------- */

.table thead th {
  color: #ffffff;
  background: #ffb4a2; /* 指定第一個和預設的標題顏色 */
}

.table thead th:nth-child(2) {
  background: #e5989b; /* 指定第二個標題顏色 */
}

.table thead th:nth-child(3) {
  background: #b5838d; /* 指定第三個標題顏色 */
}

.table thead th:nth-child(4) {
  background: #6d6875; /* 指定第四個標題顏色 */
}

/*  table ul
------------------------------- */

.table ul {
  padding: 20px;
  margin: 0;
  text-align: left;
}
.table ul li {
  border-bottom: 1px solid #e7e7e7;
  padding: 5px;
  position: relative;
  list-style-type: none;
}

/*  Responsive
------------------------------- */

@media (max-width: 767px) {
  .table-wrapper {
    margin: 30px 15px;
  }

  .table thead {
    display: none;
  }

  .table td {
    display: block; /* 一定要下！ */
    padding: 0;
  }

  .table td:before {
    content: attr(data-title); /* 顯示 data-title */
    display: inline-block;
    width: 100%;
    font-weight: 500;
    padding: 6px 0;
    color: #ffffff;
    background: #ffb4a2; /* 指定第一個和預設的標題顏色 */
  }

  .table td:nth-child(2):before {
    background: #e5989b; /* 指定第二個標題顏色 */
  }

  .table td:nth-child(3):before {
    background: #b5838d; /* 指定第三個標題顏色 */
  }

  .table td:nth-child(4):before {
    background: #6d6875; /* 指定第四個標題顏色 */
  }
}

五、不使用 table 進行表格製作

換句話說就是使用 div 或其他標籤來達到 table 的排版效果，好處是彈性度較大，CSS-TRICKS 的範例 就是使用 div 來達到各種 RWD 效果。

範例：

  1. CSS-TRICKS - Accessible, Simple, Responsive Tables
  2. iris - Day17：小事之 HTML table responsive

以上為筆者收藏的幾種 RWD Table 方法，希望可以幫助到需要的朋友：）

參考資料

  1. CSS-TRICKS - Accessible, Simple, Responsive Tables
  2. CSS-TRICKS - Responsive Data Tables
  3. CSS STARS - Responsive Table with CSS Media Queries
  4. 如何讓CSS HTML Table RWD方法
  5. Labx25sprout - Responsive Table

上一篇
【Day 24】成為網頁設計師後，我再也不畫表格了！ - Word to HTML 線上工具
下一篇
【Day 26】CSS Animation - CSS 動畫資源蒐集與使用教學
系列文
從平面轉型成網頁設計的 UI/UX 設計師 共 30 篇
  1. 26
    【Day 26】CSS Animation - CSS 動畫資源蒐集與使用教學
  2. 27
    【Day 27】好用的 JavaScript 動態提示工具庫 - Tippy.js
  3. 28
    【Day 28】Youtube iframe 影片自動縮放大小 - CSS 解決方法
  4. 29
    【Day 29】超級好用的側邊欄固定效果 - Sticky Sidebar
  5. 30
    【Day 30】終局之戰！是什麼理由支撐我完成 30 天的鐵人賽？
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19752 篇
完賽人數
529 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙