RWD <table> - 純 html, css - 無 javascript

這篇紀錄了學到的 <table> RWD  的純 html, css 顯示技巧。
雖然在現今的 RWD 網站設計裡，因為 <table>的一些缺點，
通常都還是建議以不要用 <table> 的方式去做設計 (改用 <div>....等)。

但有時我們還是會有需要用到 <table> 的情況，
例如：

1. 因為某些原因難以重改 html 結構 (含有 <table> ) 的網站 (老專案、時程、人力、需求等 ......)。
2. <table> 在表示列表型資料時的方便性，居中對齊、控制寬度容 (雖然通常代表寬度 無法 RWD) 易等。

如果真得要用 <table> 時，有辦法加上一些 RWD 的效果嗎?
以下為 <table> RWD CSS 的範例，先看在 JSFiddle 的成果展示：



如果是寬螢幕的話，會是如下顯示：

如果是窄螢幕的話，就會是如下顯示：

再來看 html 結構及 CSS：

 html :

<table class="rwd-table">
  <tr>
    <th></th>
    <th>Very poor</th>
    <th>Poor</th>
    <th>Fair</th>
    <th>Good</th>
    <th>Very good</th>
  </tr>
  <tr>
    <td data-th="">Score 1 :</td>
    <td data-th="Very poor"><input type="radio" name="Score1"/></td>
    <td data-th="Poor"><input type="radio" name="Score1"/></td>
    <td data-th="Fair"><input type="radio" name="Score1"/></td>
    <td data-th="Good"><input type="radio" name="Score1"/></td>
    <td data-th="Very good"><input type="radio" name="Score1"/></td>
  </tr>
  <tr>
    <td data-th="">Score 1 :</td>
    <td data-th="Very poor"><input type="radio" name="Score2"/></td>
    <td data-th="Poor"><input type="radio" name="Score2"/></td>
    <td data-th="Fair"><input type="radio" name="Score2"/></td>
    <td data-th="Good"><input type="radio" name="Score2"/></td>
    <td data-th="Very good"><input type="radio" name="Score2"/></td>
  </tr>
  <tr>
    <td data-th="">Score 1 :</td>
    <td data-th="Very poor"><input type="radio" name="Score3"/></td>
    <td data-th="Poor"><input type="radio" name="Score3"/></td>
    <td data-th="Fair"><input type="radio" name="Score3"/></td>
    <td data-th="Good"><input type="radio" name="Score3"/></td>
    <td data-th="Very good"><input type="radio" name="Score3"/></td>
  </tr>
</table>

在 html 裡，只是放了一個普通的 <table> ，並在其加上了一個class, "rwd-table" 做為 rwd table 的 css selector，
另一個是我們用了 data-th (屬性名可自取) 這個屬性來記錄每個 <td> 對應的 <th> 標題值，
以利在窄螢幕時，可以用 css 的 :before 或 :after 偽元素中的 content 來取得標題值。

CSS:

/* normal table css */
/* normal table css */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

table tr td, table tr th{
  border : 1px solid black;
}

table tr:nth-child(even){
  background-color : #d0aaaa;
}

/* rwd table css */
.rwd-table {
 overflow: hidden;
}

.rwd-table {
  min-width: 100%;
}

.rwd-table th {
  display: none;
}

.rwd-table td {
  display: block;
}

.rwd-table td:after {
  content: attr(data-th);
  display: inline-block;
}


.rwd-table tr {
    margin-bottom: 5px;
    display: inline-block;
    width: 100%;
}

@media (min-width: 583px) {
  .rwd-table td:after {
    display: none;
  }
 .rwd-table th, .rwd-table td {
    display: table-cell;
  }
  .rwd-table tr {
    margin-bottom: 0px;
    display: table-row;
  }
  
}

在 CSS 中，只要注意關於 .rwd-table 的部份 (即注解 /* rwd table css */ 以下的部份)，
重點就是：

1. 在寬螢幕時：
   1. th 正常顯示
   2. td:after 或 td:before 不顯示
   3. th, td 使用 display: table-cell
   4. tr 使用 display: table-row
2. 在窄螢幕時：
   1. th 不顯示
   2. td:after 或 td:before 顯示，使用 content : attr(data-th) 全得 td 上的 data-th 屬性值
   3. td 使用 display: block
   4. tr 使用 display: inline-block

參考資料：

1. Bootstrap教學－實現Table表格也支援RWD自適應效果
2. 利用 Pure CSS 讓 HTML Table 也能有 RWD 效果 - Yowko's Notes
3. 使用CSS製作響應式破壞式表格