iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
4
Modern Web

前端路上那些重要與不重要的小事系列 第 17

Day17:小事之 HTML table responsive

Table 很方便用來做資料的呈現,但是當需要在各種裝置都能正常顯示的情況下,Table 的使用就很讓人傷腦筋了。

比較常用的 Table RWD 方式有兩種:

  • 破壞原本的表格排版
  • 不使用 table 來製作 table

破壞原本的表格排版

就是將原本的 thead 隱藏,使用 data-* 以及將 td 用 display: block 來排版。

<table>
  <thead>
    <tr>
      <th>序號</th>
      <th>產品名稱</th>
      <th>價格</th>
      <th>產品描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="序號">A2018010001</td>
      <td data-title="產品名稱">青醬佐番茄香煎烏骨雞腿義式千層麵</td>
      <td data-title="價格">NT.250</td>
      <td data-title="產品描述">獨家青醬、美濃橙蜜香番茄、特選烏骨雞腿、手桿義式千層麵</td>
    </tr>
    <tr>
      <td data-title="序號">A2018010002</td>
      <td data-title="產品名稱">墨魚汁佐迷迭香鮮蝦干貝天使麵</td>
      <td data-title="價格">NT.280</td>
      <td data-title="產品描述">西班牙進口墨魚汁、台灣無毒蝦、北海道干貝、特選天使細麵</td>
    </tr>
  </tbody>
</table>

範例play


不使用 table 來製作 table

也就是使用 div 搭配 css 來製作表格。好處是可以有比較大的變化。下面我是使用 ul li 來製作

<ul>
  <li class="thead">
    <ol class="tr">
      <li>序號</li>
      <li>產品名稱</li>
      <li>價格</li>
      <li>產品描述</li>
    </ol>
  </li>
  <li class="tbody">
    <ol class="tr">
      <li data-title="序號">A2018010001</li>
      <li data-title="產品名稱">青醬佐番茄香煎烏骨雞腿義式千層麵</li>
      <li data-title="價格">NT.250</li>
      <li data-title="產品描述">獨家青醬、美濃橙蜜香番茄、特選烏骨雞腿、手桿義式千層麵</li>
    </ol>
    <ol class="tr">
      <li data-title="序號">A2018010002</li>
      <li data-title="產品名稱">墨魚汁佐迷迭香鮮蝦干貝天使麵</li>
      <li data-title="價格">NT.280</li>
      <li data-title="產品描述">西班牙進口墨魚汁、台灣無毒蝦、北海道干貝、特選天使細麵</li>
    </ol>
  </li>
</ul>

範例play

以上是今天的 table responsive 介紹。各位看倌明天見囉~

參考資料:
[1] https://css-tricks.com/responsive-data-tables/
[2] http://lab.25sprout.com/responsive_table/


上一篇
Day16:小事之 HTML table
下一篇
Day18:小事之 HTML form
系列文
前端路上那些重要與不重要的小事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
微中子
iT邦新手 4 級 ‧ 2018-01-05 19:55:11

滿酷的! 不過我可能還是會選擇寧願不讓表格 RWD。 資料呈現比較不會散散的感覺。

Bootstrap 是不是讓表格可以橫向捲動?

微中子
也是有人不愛 RWD 的表格,所以在一開始的設計上就會設計成兩種版本。

shavenking
Bootstrap 是透過設定可以讓表格橫向捲動,沒錯~

0
Chris
iT邦新手 4 級 ‧ 2018-01-06 14:11:38

刁鑽的技巧呀

哈~真的有點刁鑽,所以 Bootstrap 透過設定可以讓表格橫向捲動的方式也是滿多人用的

0
ytyjt0976
iT邦新手 5 級 ‧ 2022-04-20 10:58:17

想請問在手機板像是價格那列如果要在產品青醬那列的右邊,兩個方法都可以實現嗎?

我要留言

立即登入留言