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也不會被隱藏。