ellipsis在table裡失效

問題：display：table，或者table标簽布局之後，設定td（table-cell）文字溢出隐藏ellipsis失效

解決方法：

1. 在table（display：table）的css樣式中設定:table-layout:fixed;
2. 在table td 的css樣式中設定： overflow:hidden;text-overflow:ellipsis;即可

出現頻率太高，遺忘太快。

項目中最常用的布局如下：

<div class="table">
   <div class="table-row">
      <div class="table-cell"><div class="ellipsis">編号</div></div>
      <div class="table-cell"><div class="ellipsis">名稱</div></div>
      <div class="table-cell"><div class="ellipsis">人數</div></div>
      <div class="table-cell"><div class="ellipsis">隊伍人員</div></div>
      <div class="table-cell"><div class="ellipsis">投票</div></div>
    </div>
</div>
           

css代碼：

.table{
    display:table;
    width：100%;
    table-layout:fixed;
}
.table-row{
    display:table-row;
}
.table-cell{
    display:table-cell;
    width:20%;
}
.ellipsis{
    width:100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
           

為什麼要在table-cell裡再套一層div，才賦ellipsis樣式呢，大家自己試試就知道原因了~~