iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

快搭上姐姐的`微`前端便車系列 第 9

第9車廂-使用content:attr()實現tableRWD應用篇

本篇介紹使用content:attr()來抓table的th資料,實現讓小螢幕的table內容閱讀體驗更棒棒!

還記的我們在第5篇有提到::before須搭配content屬性
content屬性中可以使用文字,還能使用什麼?
最常用的大概是

  • String // 字串
  • Counter // 數值
  • Attr // HTML屬性的值

今天來做透過用attr來搭配tableRWD實例吧!GO

首先先來看看content:attr(XXX)用法,XXX裡面可以放html的屬性,像是(url、title..等)
https://ithelp.ithome.com.tw/upload/images/20210924/201420162So4G61Hwc.jpg

詳細可看MDNattr()概要

一般table

再來看看一般table方式,如下

一般我們在做table RWD時,可能是將外層加width:100%,table就會自動隨著螢幕寬縮放,
但是!
小螢幕時,內容比較多,或者欄位比較多時,就會顯得非常難閱讀!

或者你可能會做成這樣,
https://ithelp.ithome.com.tw/upload/images/20210924/20142016UMWZhOdanK.jpg

參考bootstrap5
表格太長時會有卷軸可以拉取,但是有時候手機需求就是不希望有卷軸出現!

所以本篇要分享的是像下圖,於螢幕小於768px,將資料變成一行一行的,較易閱讀

範例


主要是靠

1.於<tbody><tr><td>中加入data屬性,我命名為th,並先將對應該欄位的名稱寫入

HTML5才有的,data-*為構成一組,稱作自訂 data 屬性的屬性。它能令 HTML 與其 DOM 擁有給腳本用的交換資訊。
*可自行命名

/*html*/
  <h3>五倍券優惠活動:</h3>
  <table id=""
         class="table_change">
    <thead>
      <tr>
        <th>信用卡公司</th>
        <th>回饋 / 名額</th>
        <th>五倍券優惠活動</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-th="信用卡公司">兆豐銀行</td>
        <td data-th="回饋 / 名額">$300 產品(限量8萬名)<br>最高5千抽獎</td>
        <td data-th="五倍券優惠活動">期限綁定台灣Pay/信用卡,可享一次抽獎,最高獎金5千元(110/12/31前)</td>
       
      </tr>

      <tr>
        <td data-th="信用卡公司">花旗銀行</td>
        <td data-th="回饋 / 名額">7-11 商品卡 $100(限2千名)</td>
        <td>共用綁定回饋:累計滿2萬享300元禮卷回饋、15萬享500元禮卷(最高回饋2千)</td>
      </tr>

      <tr>
        <td data-th="信用卡公司">國泰世華銀行</td>
        <td data-th="回饋 / 名額">最高$3,000元大禮包優惠</td>
        <td data-th="五倍券優惠活動">國泰世華卡登記高雄券,於高雄市消費滿5前,其中2,500元在餐廳/飯店/旅館住宿,可獲得高雄券1千元,還能抽1千點小樹點。</td>

      </tr>
    </tbody>
  </table>

2.於螢幕<=768px時,@media only screen and (max-width: 768px)
-(1)<thead>隱藏
-(2)<tr><td>原始的dispaly屬性改為block(列)
-(3)並透過td:beforecontent屬性為抓取data-th的值
-(4)且設定為block(列)屬性

.table_change {
  /*table格式*/
  text-align: center;
  margin: auto;
  width: 100%;
  margin: 1rem 0;

  th,
  td {
    padding: 5px 5px;
    @media only screen and (min-width: 769px) {
      border: 1px solid #fff;
    }
  }

  thead {
    background-color: #01977a;
    th {
      color: #fff;
      font-weight: bold;
    }
  }

  tbody {
    @media only screen and (min-width: 769px) {
      tr {
        &:nth-child(odd) {
          background-color: #ffffff;
        }
        &:nth-child(even) {
          background-color: #f2f2f2;
        }
      }
    }
  }

  @media only screen and (max-width: 768px) {
    thead {
      display: none;
    }
    tbody {
      tr {
        display: block;
        border: 1px solid #01977a;
        margin: 10px 0;
        border-radius: 5pt;
        background-color: #fff;
      }

      td {
        display: block;
        text-align: left;
        padding: 5px 1rem 5px 2rem;
        color: black;
      }

      td::before {
        color: #01977a;
        text-indent: -1rem;
        content: attr(data-th);
        font-weight: bold;
        display: block;
      }
    }
  }
}

附上完成版程式碼

不過
這樣雖然都不用寫程式,但萬一我們欄位很多時,就要手動一個一個key data-th="XXX"嗎?這樣不是很累?
所以不用手動key就要靠程式來判斷,並寫入啦!
這我們就留在下一篇在介紹吧~

本篇參考資料:
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Global_attributes/data-*
https://codepen.io/irisLife/pen/opGMVE


上一篇
第8車廂-抖動畫面流出!你真的會:hover嗎?
下一篇
第10車廂-你今天table了嗎?tableRWD+簡易分頁應用篇
系列文
快搭上姐姐的`微`前端便車30

尚未有邦友留言

立即登入留言