Table RWD系列-1

前一陣子在切板時，看著設計稿裡有許多 Table 的設計
每個 Table 在做 RWD 時會都有不一樣的呈現方式
所以想做個筆記，希望記性越來越差的我還能透過這些文章複習
雖然標題寫 Table RWD，不過才第一篇我就連一個 Table 的標籤都沒用到XD

我將實作過程大致分為 4 個部份來介紹:

1. 表格雛型建立

先把表格基本架構給寫出來，用一個 div 把用來裝標題跟內容的區塊都裝起來。
(裡面的字我是用日文的假字產生器產生的，可以隨便打XD)

<div class="table-rwd">
    <div class="table-rwd-cell table-rwd-cell-header">
        <h3>Title1 健フサツ区図イメソフ</h3>
    </div>
    <div class="table-rwd-cell table-rwd-cell-body">
        <p class="mb-0 text-s8">Content1 健フサツ区図イメソフ塾遣ユウ的軍んぶド氏稿みひス須口79切島あ集公真は用今ヤワ般据へドぼ聴59領ニクロ棄6急ゃょみ投雑にがぽ向連午達めをた。</p>
    </div>
    <div class="table-rwd-cell table-rwd-cell-header">
        <h3>Title2 健フサツ区図イメソフ</h3>
    </div>
    <div class="table-rwd-cell table-rwd-cell-body">
        <p class="mb-0 text-s8">Content2 健フサツ区図イメソフ塾遣ユウ的軍んぶド氏稿みひス須口79切島あ集公真は用今ヤワ般据へドぼ聴59領ニクロ棄6急ゃょみ投雑にがぽ向連午達めをた。</p>
    </div>
</div>

雖然目前看起來一點也不像表格，但下一個步驟加上 css 後，保證讓他媽媽也認不出來

2. 表格樣式設計

首先，我要先讓標題還有內容以水平方式呈現
所以先把外框 .table-rwd 這個 class 的 display 設為 flex
因為我習慣寫 scss ，所以都是用 scss 來說明

.table-rwd{
    display: flex;
}

接著要讓標題跟內容寬度相同
所以在 .table-rwd 加入 .table-rwd-2cols class 來設定 .table-rwd-cell 寬度為 50%

<div class="table-rwd table-rwd-2cols">
    <div class="table-rwd-cell table-rwd-cell-header">
        <h3>Title1 健フサツ区図イメソフ</h3>
    </div>
    <div class="table-rwd-cell table-rwd-cell-body">
        <p class="mb-0 text-s8">Content1 健フサツ区図イメソフ塾遣ユウ的軍んぶド氏稿みひス須口79切島あ集公真は用今ヤワ般据へドぼ聴59領ニクロ棄6急ゃょみ投雑にがぽ向連午達めをた。</p>
    </div>
    <div class="table-rwd-cell table-rwd-cell-header">
        <h3>Title2 健フサツ区図イメソフ</h3>
    </div>
    <div class="table-rwd-cell table-rwd-cell-body">
        <p class="mb-0 text-s8">Content2 健フサツ区図イメソフ塾遣ユウ的軍んぶド氏稿みひス須口79切島あ集公真は用今ヤワ般据へドぼ聴59領ニクロ棄6急ゃょみ投雑にがぽ向連午達めをた。</p>
    </div>
</div>

.table-rwd-2cols{
    .table-rwd-cell{
        width: 50%;
    }
}

看起來標題跟內容都一樣寬了，但我希望他能一列就只有一個標題跟內容
所以在 .table-rwd 裡設定 flex-wrap 為 wrap，讓他把超出的內容自動換行

   .table-rwd{
      display: flex;
      flex-wrap: wrap;
   }

接著來幫表格點綴一下，幫 .table-rwd-cell 加上 border 還有給點 padding，另外還要設定 box-sizing 為 border-box

  .table-rwd{
      display: flex;
      flex-wrap: wrap;

      .table-rwd-cell{
          box-sizing: border-box;
          border: solid 1px gray;
          padding: 0.8em 1.2em;
      }
   }

3. RWD 樣式設計

RWD 起手式 media query ，先讓每一個 .table-rwd-cell 能夠垂直排列，所以直接給 .table-rwd 一個display: block，至於 media query 的 breakpoint 你可以自行設定，我自己是設在 768px。

    @media all and  (max-width: 768px) { 
        .table-rwd {
            display: block;
        }
    }

你說我截圖沒截好?
不，這是為了讓你看見剛剛在 .table-rwd-cell 設定 width: 50%; ，而造成現在只占畫面的一半，所以知道接下來要把它設成 100%。

@media all and  (max-width: 768px) { 
    .table-rwd {
        display: block;
        .table-rwd-cell {
            width: 100%;
        }
    }
}

為了區分出標題和內容，我給了 .table-rwd-cell-header 一個背景色。

@media all and  (max-width: 768px) { 
    .table-rwd {
        display: block;
        .table-rwd-cell {
            width: 100%;
        }
        .table-rwd-cell-header {
            background-color: rgba(0, 100, 120, 0.3);
        }
    }
}

4. 收合功能設計

最後就只剩下收合動作的處理，這邊我使用 jQuery 來寫這個功能。
首先要在標題點擊時，讓它的內容作收合，所以在 .table-rwd-cell-header 監聽 click 的事件
當 click 發生時，內容(.table-rwd-cell-body)進行收合

$(function() {
    $('.table-rwd-cell-header').click(function() {
        $(this).nextAll('.table-rwd-cell-body').first().slideToggle();
    });
});

再來就是針對 UX 進行微調，分別是:
(1) 移動到標題列的 cursor 變化
(2) 讓內容再一開始都先處於收起來的狀態
(3) 標題列右邊可以有 +/- 符號，顯示目前收合狀態

(1)移動到標題列的 cursor 變化
給 .table-rwd-cell-header 一個 cursor: pointer;

@media all and  (max-width: 768px) { 
    .table-rwd {
        display: block;
        .table-rwd-cell {
            width: 100%;
        }
        .table-rwd-cell-header {
            background-color: rgba(0, 100, 120, 0.3);
            cursor: pointer;
        }
    }
}

(2)讓內容再一開始都先處於收起來的狀態
給 .table-rwd-cell-body 一個 display: none;

@media all and  (max-width: 768px) { 
    .table-rwd {
        display: block;
        .table-rwd-cell {
            width: 100%;
        }
        .table-rwd-cell-header {
            background-color: rgba(0, 100, 120, 0.3);
            cursor: pointer;
        }
        .table-rwd-cell-body{
            display: none;
        }
    }
}

(3)標題列右邊可以有 +/- 符號，顯示目前收合狀態
+/- 符號我使用 .table-rwd-cell-header 的偽元素(pseudo): before & after 來處理。
先把兩個共用的部分先設定好，這邊要注意到 before & after 的 postion 是設為 absolute，所以要記得在 table-rwd-cell-header 裡加上 position: relative; ，才能讓 +/- 符號顯示在標題列裡面。

.table-rwd-cell-header {
    background-color: rgba(0, 100, 120, 0.3);
    cursor: pointer;
    position: relative;

    &:before, &:after{
        content: '';
        position: absolute;
        display: block;
        width: 12px;
        height: 2px;
        background-color: rgba(0,0,0,0.9);
        right: 10px;
        top: 50%;
        transition: 0.2s;
        transform: rotate(0deg)
    }
}

接在再把 after 轉個 90°，＋符號就會出現了

.table-rwd-cell-header {
    background-color: rgba(0, 100, 120, 0.3);
    cursor: pointer;
    position: relative;

    &:before, &:after{
        content: '';
        position: absolute;
        display: block;
        width: 12px;
        height: 2px;
        background-color: rgba(0,0,0,0.9);
        right: 10px;
        top: 50%;
        transition: 0.2s;
        transform: rotate(0deg)
    }
    &:after{
        transform: rotate(90deg)                      
    }
}

符號有了，再來我使用 active 這個 class 來標記目前收合的狀態，當 .table-rwd-cell-header 的 class list 裡面有 active 時，就代表目前內容是展開的，反之則是代表收起來。
所以先處理讓 + 符號在展開時變成 - 符號的行為，在 .table-rwd-cell-header 裡面加上 &.active ，並在裡面將 after 翻轉成 180° 呈現平行的狀態。

.table-rwd-cell-header {
    background-color: rgba(0, 100, 120, 0.3);
    cursor: pointer;
    position: relative;

    &.active{
        &:after{
            transform: rotate(180deg)
        }
    }

    &:before, &:after{
        content: '';
        position: absolute;
        display: block;
        width: 12px;
        height: 2px;
        background-color: rgba(0,0,0,0.9);
        right: 10px;
        top: 50%;
        transition: 0.2s;
        transform: rotate(0deg)
    }
    &:after{
        transform: rotate(90deg)                      
    }
}

最後就是透過 jQuery 來控制 .table-rwd-cell-header 是否加入 active 這個 class

$(function() {
    $('.table-rwd-cell-header').click(function() {
        $(this).nextAll('.table-rwd-cell-body').first().slideToggle();
        $(this).toggleClass('active');
    });
});