- #01 原始的 Table
- #02 隱藏某些項目
- #03 水平 Scroll Table
- #04 破壞 Table 排版
- #05 CSS 製作 DIV Table
試著拉動你的螢幕寬度吧！
#01 原始的 Table
不做任何 CSS 設定，是一個 100% 寬度的 <table>
人人都會
對行動裝置不太友善
#02 隱藏某些項目
於不同寬度的螢幕，隱藏一些非必要的欄位 （ <th> , <td> ）。
960px 以下：隱藏門市編號
720px 以下：隱藏門市電話、門市地圖
480px 以下：隱藏門市地址
介面寬度適中
表格的內容必須包含可省略的欄位，否則可能會省略重要資訊
#03 水平 Scroll Table
於 720px 以下的螢幕將 thead 換至左方，右方的 tbody tr 以水平方式排列並可 Scroll.
可以保留所有內容。
所有的內容不能有 br 等換行的動作，否則無法使用此排版。
#04 破壞 Table 排版
直接將 Thead 直接拿掉，剩下的 tbody tr td 都使用 display:block 來排版
可以保留所有內容、也很適合行動裝置觀看。
排版會拉的很長，可能要滑很久才能看完，且thead的內容會重複很多次。
#05 CSS 製作 DIV Table
拒絕使用 <table> 來呈現 table, 改用 CSS 搭配 DIV 呈現出 table style
下方的 Table 其實全部都是用 DIV 拼出來的唷。
您不會在網頁中看見 <table> Element, 全部都是 div。你可以自由的設計 RWD 狀態下的各個 DIV 樣子。
您可以根據您的內容決定要使用哪種方式呈現你的 Layout。
| 門市編號 |
門市類型 |
門市名稱 |
門市地址 |
門市電話 |
門市地圖 |
| 01 |
品牌形象店 |
信義威秀旗艦店 |
臺北市信義區松壽路18號 |
04-22228888 |
我的地圖我的地圖點我 |
| 02 |
品牌形象店 |
鈺鴻鐘錶(西門町neoWEST旗艦店) |
臺北市萬華區西寧南路125號 |
04-22228888 |
我的地圖我的地圖點我 |
| 03 |
品牌形象店 |
綺華麗(信義新天地A4館) |
臺北市信義區松高路19號3樓 |
04-22228888 |
我的地圖我的地圖點我 |
| 04 |
品牌形象店 |
精光堂(太平洋SOGO百貨-忠孝館) |
臺北市大安區忠孝東路四段45號7樓 |
04-22228888 |
我的地圖我的地圖點我 |
| 05 |
品牌形象店 |
精光堂(大葉高島屋) |
臺北市士林區忠誠路2段55號4樓 |
04-22228888 |
我的地圖我的地圖點我 |
| 06 |
品牌形象店 |
銓盛鐘錶(台北美麗華百樂園) |
臺北市中山區敬業三路20號2樓 |
04-22228888 |
我的地圖我的地圖點我 |
| 07 |
品牌形象專區 |
瓦吉鐘錶 |
臺北市士林區大東路13號 |
04-22228888 |
我的地圖我的地圖點我 |
門市編號
門市類型
門市名稱
門市地址
門市電話
門市地圖
01
品牌形象店
信義威秀旗艦店
臺北市信義區松壽路18號
04-22228888
我的地圖我的地圖點我
02
品牌形象店
鈺鴻鐘錶(西門町neoWEST旗艦店)
臺北市萬華區西寧南路125號
04-22228888
我的地圖我的地圖點我
03
品牌形象店
綺華麗(信義新天地A4館)
臺北市信義區松高路19號3樓
04-22228888
我的地圖我的地圖點我
04
品牌形象店
精光堂(太平洋SOGO百貨-忠孝館)
臺北市大安區忠孝東路四段45號7樓
04-22228888
我的地圖我的地圖點我
05
品牌形象店
精光堂(大葉高島屋)
臺北市士林區忠誠路2段55號4樓
04-22228888
我的地圖我的地圖點我
06
品牌形象店
銓盛鐘錶(台北美麗華百樂園)
臺北市中山區敬業三路20號2樓
04-22228888
我的地圖我的地圖點我
07
品牌形象專區
瓦吉鐘錶
臺北市士林區大東路13號
04-22228888
我的地圖我的地圖點我
