table表格橫向滾動遇見的坑

　　查閱文檔后，以為table表格設置寬度只用給其中td設置寬度就行了，th寬度會根據td自動增加，然后table寬度也就被撐開了。可設置好td寬度后發現table寬度是會根據屏幕尺寸伸縮的，如下圖：

　　

　　由圖可見，因為容器寬度改變，table寬度已經改變了，哪怕你給td設置的寬度是100px，但現在td寬度也自動改變了，這樣是無法形成滾動的。

　　最后通過度娘發現，給table設置width屬性后就可解決這個問題了，並且td寬度也不用設置了，會自動平分。解決后效果如下：

 

　　圖中滾動條已經出現，並且表格樣式正常。如果表格列數不固定的話，可通過JS動態設置table的width來解決。以下附上示例代碼：

 

    <style type="text/css">
      table caption {margin-bottom: 10px;font-weight: bold;font-size: 20px;}
      table {margin: 0 auto;margin-top: 30px;}
      table th, table td {border: 1px solid #bbb;}
      table th {height: 80px;}
      table td {height: 50px;text-align: center;}
    </style>

     <table width="900">
        <caption>計划表</caption>
        <thead>
          <tr>
            <th>序號</th>
            <th>任務</th>
          </tr>
        </thead>
        
        <tbody>
          <tr>
            <td>01</td>
            <td>起床</td>
          </tr>
          <tr>
            <td>01</td>
            <td>起床</td>
          </tr>
        </tbody>
        
        <tfoot>
          <tr>
            <td>總計</td>
            <td>10條</td>
          </tr>
        </tfoot>
      </table>