table-layout:fixed 佈局注意事項

table-layout:auto 是表格佈局中的默認值，採用瀏覽器自動錶格佈局算法，可是缺點會很明顯

• 給td指定的width不必定生效，td的width會自動調整
• text-overflow: ellipsis也會失效，一樣，img會撐大td

舉個例子：

<table>
      <tr>
        <td>31</td>
        <td>32ssssssssssssss</td>
      </tr>
      <tr>
        <td>31</td>
        <td>
          <img src="assets/tiger.png" alt="">
        </td>
      </tr>
    </table>

table {
  display : table;
  width : 200px;
  height : 200px;
  border-collapse : collapse;
  table-layout : auto;
}
td {
  overflow : hidden;
  width : 100px;
  height : 100px;
  border : 1px solid black;
  text-overflow : ellipsis;
}

這樣的結果就是這樣的：

td 的 width 和 img 都沒有溢出隱藏，反而撐大了td，可是若是把 table-layout改成 fixed，效果如圖：

td的text-overflow : ellipsis和overflow : hidden都會起做用，可是這裏也有幾個地方要注意：

• text-overflow : ellipsis生效的前提是
  1. overflow不爲visible，最好是相似hidden的值
  2. 須要指定table的width
• 若是td的寬度加起來超過table的width，即便給table加上overflow:hidden，td也不會被隱藏。