【RWD】議題(2)：表格太長怎麼辦

方法1：把不重要的資訊弄掉

<tr>
                <td  class="m-none">2000001</td>
                <td>2018/02/05</td>
                <td>王小名</td>
                <td>冰箱</td>
                <td>20000</td>
                <td  class="m-none">  //增加class
                    <input type="button" value="修改">  
                    <input type="button" value="刪除">
                </td>
 </tr>

@media(max-width: 560px){
    .m-none{
        display: none
    }
}
//讓他在特定的大小以下，就消失

方法2：使用overflow-x:auto

*用一個div.container把table包起來，然後設定overflow-x:auto

• table本身設定一個不錯的寬度

<div class="container">
        <table class="order">
           //省略
        </table>
 </div>

@media(max-width: 560px) {
    .container {
        overflow-x: auto;
    }
    .order {
        width: 1000px;
    }
}

​