---
# System prepended metadata

title: 5. 響應式表格與表單設計
tags: [rwd]

---

---
tags: rwd
---
# 5. 響應式表格與表單設計
## 響應式表格
 ### 1.隱藏表格編號table-none
* Table設定100% 每一個th設定相對%
* 在手機版隱藏編號和管理欄位，把th、td加上class=“m-none”
[範例檔table-none](https://codepen.io/tinchen/pen/jOwpWmM)
![](https://i.imgur.com/uhbTuHy.png)


 ### 2.左右滾動的表格table-overflow
* 設定可左右滾動的表格.container{overflow-x:auto;} 
* 再加上表格寬度固定w768px讓瀏覽更舒適
 [範例檔table-overflow](https://codepen.io/tinchen/pen/BaZPKKW)
![](https://i.imgur.com/bj5Vscg.png)


## 表單設計
### 文字欄位並非只有text
表單input 輸入對應的type="email"、"tel"、"number"
在手機版會自動切換鍵盤模式
![](https://i.imgur.com/7RowdG7.png)
