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

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

## 表單設計
### 文字欄位並非只有text
表單input 輸入對應的type="email"、"tel"、"number"
在手機版會自動切換鍵盤模式