RWD - 簡單RWD概念的Table

日期：
隨著現在手持裝置的盛行，使用者操作目標從PC移轉至小尺寸螢幕的手機上，現在網頁處於要能同時符合PC使用者與手機使用者的使用者經驗(UX)，這時候RWD設計概念就出來了。RWD(Responsive Web Design，響應式網頁設計)的簡單概念就是網頁會隨著螢幕大小來調整顯示的樣式。
RWD實際實作的方式就是靠CSS media方式來定義各種螢幕寬度變化時更改CSS樣式，以下是幾個實作RWD的幾個要點：
  • 與寬高大小相關的樣式屬性(例如：width, height, border-width, ...等)使用相對值(百分比%或em)取代以絕對值(px)定義。
  • media定義多個螢幕大小區間，例如 (min-width:450px and max-width: 769px), (max-width: 451px)
  • 手機顯示與PC顯示的HTML要放在同一頁面中，透過media改變來切換display顯示與不顯示
  • ...
用說的可能比較不容易理解，所以限量實作了一個簡單RWD概念的Table，在看程式之前先來看看原先Table的一些限制。

一般來說，要顯示大量資料時我們會使用Table來闡釋資料，可是這種橫向多欄位在手機上較難表示，所以大部分看到的都是用橫向卷軸讓使用者拖曳，資料多時又有縱向卷軸，這樣實在是很難操作。所以限量修改Table的表示方式，讓欄位在手機上顛倒過來，改以縱向欄位表示，一組資料用一個區塊，這樣只需要一個縱向卷軸就行了，也比較符合使用者手指習慣的縱向滑動動作。

 做法是在各個td中加上data的屬性，屬性值為th所顯示的標題。在畫面轉換時，CSS會把td的display改成block，接著在td的before Element加上data的內容，然後把th給隱藏起來。或許說明不是很容易懂，以下可以直接看程式碼與DEMO就能比較快理解。

 index.html

 
<!DOCTYPE html>
<html>
  <head>
    <title>RWD Table Demo</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <table class="rwd-table">
      <thead>
        <tr>
          <th>No</th>
          <th>ID</th>
          <th>Name</th>
          <th>Cell Phone</th>
          <th>Address</th>
          <th>Birthday</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-th="No">1</td>
          <td data-th="ID">A0001</td>
          <td data-th="Name">Craig</td>
          <td data-th="Cell Phone">0912345678</td>
          <td data-th="Address">YiLan</td>
          <td data-th="Birthday">1988/07/04</td>
        </tr>
        <tr>
          <td data-th="No">2</td>
          <td data-th="ID">B0002</td>
          <td data-th="Name">Vivian</td>
          <td data-th="Cell Phone">0998765432</td>
          <td data-th="Address">Tainan</td>
          <td data-th="Birthday">1988/01/27</td>
        </tr>
        <tr>
          <td data-th="No">3</td>
          <td data-th="ID">C0003</td>
          <td data-th="Name">Tom</td>
          <td data-th="Cell Phone">0974185296</td>
          <td data-th="Address">Taipei</td>
          <td data-th="Birthday">1990/10/14</td>
        </tr>
        <tr>
          <td data-th="No">4</td>
          <td data-th="ID">D0004</td>
          <td data-th="Name">Mary</td>
          <td data-th="Cell Phone">0936925814</td>
          <td data-th="Address">US</td>
          <td data-th="Birthday">1978/03/05</td>
        </tr>
        <tr>
          <td data-th="No">5</td>
          <td data-th="ID">E0005</td>
          <td data-th="Name">Jan</td>
          <td data-th="Cell Phone">0912456789</td>
          <td data-th="Address">UK</td>
          <td data-th="Birthday">1989/04/01</td>
        </tr>
      </tbody>
    </table>
  </body>
  
</html>

style.css

 
.rwd-table {
  border: 1px solid #000000;
  border-collapse: collapse;
}
  .rwd-table th, td {
    border: 1px solid #000000;
    padding: 2px 4px;
    text-align: center;
  }
  
@media screen and (max-width: 451px) {
  
  .rwd-table tr {
    border: 1px solid #000000;
  }
  
  .rwd-table th {
      display: none;
  }
  
  .rwd-table td {
      display: block;
      border: none;
  }
  
  .rwd-table td:before {
      content: attr(data-th) " ";
      float: left;
      font-weight: bold;
  }
}


展示網址：RWD Table Demo

RWD Table只是目前的其中一個應用，還有許多像Tab, Menu, Button Group...等其實是要蠻常隨著畫面大小變化而改變的，限量會在學習RWD的路上持續的更新與進步，當然還要得感謝國內外網路上的神人。 參考來源：
10+ Solutions for Responsive Data Tables









留言

張貼留言