iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
1
Modern Web

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

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

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

尚未有邦友留言

立即登入留言