前端控制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>