前端控制table宽度，将多余字体隐藏且置为省略号

虽然，网页制作很少使用table了，但是作为一个网页小白，table使用还是很不错的选择。最近有一个需求是，将数据使用表格展示，但是，某些字段数据内容过长，导致将td单元格撑起来了，变得很大，很难看。所以，需要将表格设置一个固定的宽度，所有的td的宽度都能够进行控制。并且将多余的内容使用...省略号代替。因此，要使用到标签的title属性进行提示展示方式。

首先，控制表格的固定宽度，由于，每个显示器的大小不确定，所以，将宽度使用百分比的方式进行设置；

width="100%"

同时，要固定table的宽度

使用table的样式固定宽度：
style="table-layout: fixed;"

这样，我们就做好的固定table工作了。然后，我们要在需要设置省略号的地方进行设置样式

可以使用css进行统一设置，方便使用
注意：设置属性时，有可能没有提示，直接写出来就可以
td:{
    overflow: hidden; //将多余的内容隐藏
    white-space: nowrap; //设置禁止内容换行
    text-overflow: ellipsis; //将多余的内容替换成...(省略号)  
}

至此，我们将多余数据替换成省略号已经完成了。

但是，会出现一个问题。你会发现，你的table中的td变成了平均分配的宽度了，假如，你想将某一个td单独设置宽高，不起作用。为什么呢，这是因为，你讲table的宽度进行固定了。而且使用的时百分比的方式，所以，如果想要将单独的td进行宽度的设置，你需要将一行的td的宽度都置位百分比，并且，同一个table下的td的百分比相加都等于你所设置的table整体宽度的百分比。

也就是说，假如，你将table的宽度设为100%，那么，你table下的一行的td的宽度相加等于100%。假如你有五个td，那么你每个td的宽度都为20%，你可以单独将某一个td设为30%，同时，你需要将另外一个td的宽度设为10%。

如果某个td使用了colspan那么就不能再td上面设置宽度了。

需要使用<col>标签了

//css
.td:{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

//html
<table width="100%" style="table-layout: fixed;word-wrap:break-word;">
    <tr>
        <td colspan="5"></td>
    </tr>
    <colgroup>
        <col style="width:20%"></col>
        <col style="width:20%"></col>
        <col style="width:30%"></col>
        <col style="width:20%"></col>
        <col style="width:10%"></col>
    </colgroup>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
    </tr>
    <tr>
        <td class="td" title="aaaaa">aaaaaaaaaaaaffafaffsffsfsffsfsaaaaaaaaaaaaa</td>
        <td class="td" title="bbbbb">bbbbbbbbbbbbfgfdfdsdafsfsfsfsdbbbbbbbbbbbbb</td>
        <td title="ccccc">ccccccccccccvdsvfdfsffsdafdasfdsecccccccccccccccccc</td>
        <td title="ddddd">ddddddddddddvadsvfddasfafasdfsafs</td>
        <td title="eeeee">eeeeeeeeeeeefsfsfsafsafsdfsdfsdfsd</td>
    </tr>
</table>