歡迎來到Altaba的部落格 2017年2月20日

大家在前端編寫過程中，難免會遇到表格問題，要求不高的話表格相信大家會首選bootstrap裡面的樣式，響應式的表格大小是最省事的，可是前端工作中難免會遇到一些奇葩的需求，這時候對於喜歡編寫js程式碼突然去研究CSS的樣式問題，會煩死，下面是本人為了解決：表格大小要響應式，每個td佔用的大小用百分比確定好，雖然寬度大小會隨著頁面大小變化，但是對應的寬度百分比不變，表格在小尺寸頁面的情況下內容不能把td撐大，超出就用省略號代替，滑鼠懸浮上顯示完整的內容。這個需求看上去不難，自己做起來會發現很多問題。

頭痛的是當td寬度用百分比固定好的時候，即使設定了

 white-space:nowrap;/*文字不會換行，在同一行顯示*/
 overflow:hidden;超出隱藏
 text-overflow:ellipsis;省略號顯示

會發現表格每個td還是被撐開

當每個td用固定的px設定好，就不會被撐開，那這樣就不滿足響應式了

怎麼辦？？？

辦法在這

在table上加一個樣式：

 table-layout: fixed;/*列寬由表格寬度和列寬度設定。*/

這樣問題就解決了，還有，滑鼠懸浮顯示td裡面的完整的內容，當我想到這個問題的時候，我首先想到的是用JS去弄一個提示tab,這時候發現網上有這種解決方法

在每個td上面加一個屬性 title=“完整內容”，這個適用於動態載入表格時候使用，使用字串拼接，title的值從後臺拼接上去。及其的簡單方便，我不會告訴你很多網頁版的音樂網站都是那個懸浮顯示完整資訊都是這麼幹的。