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;（截断）