Tabel RWD系列-1


| 174
Tabel 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-wrapwrap,讓他把超出的內容自動換行

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

接著來幫表格點綴一下,幫 .table-rwd-cell 加上 border 還有給點 padding,另外還要設定 box-sizingborder-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');
    });
});

以上是我個人筆記,如果你們有其他不錯的方法,也非常歡迎能與我交流,讓我能學更多東西。
最後,附上我的 codepen,感謝你的閱讀。

#Responsive #table #table rwd #html #css #SCSS






Related Posts

Go起手式之三

Go起手式之三

自動化測試 x Puppeteer - 玩偶QA參一咖 Day03

自動化測試 x Puppeteer - 玩偶QA參一咖 Day03

寫作松閱讀組Day00~人性較量

寫作松閱讀組Day00~人性較量

解析:純 CSS 的圈圈叉叉

解析:純 CSS 的圈圈叉叉

網路安全(1) - 基礎密碼學

網路安全(1) - 基礎密碼學

每日心得筆記 2020-06-12

每日心得筆記 2020-06-12



Comments