table中超過長度的列，顯示省略號

<style type="text/css">     
.table-ellipsis {
    table-layout: fixed;
    width: 100%;
}

    .table-ellipsis td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>     

<table class="table-ellipsis">
  <tr>
    <td style="width:10%;">helphelphelphelphelphelphelphelphelphelp</td>
    <td style="width:1%;">:</td>
    <td style="width:20%" >
       aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbb
    </td>
    <td >123456789</td>
  </tr>
</table>

注意幾點：

1，table的width必須設定值，上面設定的是100%，也可以設置為400px等。

2，table-layout: fixed; 這樣設置后，表格的每列的寬度由第一行的每列寬度決定。如果不設置就會平均分配寬度。

3，td中要直接放文字，不能套一個span，div等，套了之后，省略號是沒有效果的。

4，如果第一列中有合並的列（colspan），合並列中的子列將會平均分配合並列寬度，即使你在第二行合並列的子列設置寬度，也是無效的。

    要解決這個問題，可以考慮，在開頭增加一行tr，設置height=0px，這一行專門用來控制每一列的寬度，所以這一行不能有合並列。

5，text-overflow: ellipsis; 除了顯示省略號，還可以為text-overflow: clip;（截斷）