css 固定HTML表格的寬度

在網頁中插件表格時，就算你有時定義了寬度，默認的也會根據裏面內容的來自動拉伸。有時候自動拉伸是好，可是若是你表格裏面的內容太長，表格就會拉伸的特別難看。

像下面的表格，正常的顯示應該以下：

可是若是裏面的數據太長的話，就會錯位成下面這個樣子：

咱們如何保證抽獎時間固定寬度，讓它顯示一行，後面的獎品也顯示一行，超出的部分用省略號表示呢？

html部分代碼以下：

 1 <table cellpadding="0" cellspacing="0">
 2     <tr>
 3         <th align="left" width="100">抽獎時間</th>
 4         <th align="left">獎品</th>
 5     </tr>
 6     <tr>
 7         <td align="left">2016-11-17</td>
 8         <td align="left"><div class="award-name">10元投資紅包</div></td>
 9     </tr>
10     <tr>
11         <td align="left">2016-11-17</td>
12         <td align="left"><div class="award-name">長沙萬達文華大酒店1晚+橘子洲江景溫泉門票2張</div></td>
13     </tr>
14     <tr>
15         <td align="left">2016-11-17</td>
16         <td align="left"><div class="award-name">科沃斯地寶靈犀掃地機器人</div></td>
17     </tr>
18     <tr>
19         <td align="left">2016-11-17</td>
20         <td align="left"><div class="award-name">10元投資紅包</div></td>
21     </tr>
22     <tr>
23         <td align="left">2016-11-17</td>
24         <td align="left"><div class="award-name">10元投資紅包</div></td>
25     </tr>
26 </table>

 

加入如下代碼便可：

1 table{table-layout: fixed;word-break: break-all; word-wrap: break-word; //表格固定佈局}
2 .award-name{-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%; //超出部分顯示省略號}

 

其中table-layout:fixed 表示：
列寬由表格寬度和列寬度設定。在固定表格佈局中，水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。

其中word-break:break-all 表示：
word-break 屬性規定自動換行的處理方法。break-all容許在單詞內換行。

其中word-wrap: break-word 表示：
word-wrap 屬性容許長單詞或 URL 地址換行到下一行。break-word就表示在長單詞或 URL 地址內部進行換行。

其實table-layout, word-break, word-wrap這三個屬性都是關於固定寬度顯示控制的。
對通常的瀏覽器來講，只須要其中一個就能夠完成控制了，可是，通常咱們仍是會把三個屬性都加上，這樣以保證對全部的瀏覽器都兼容。

最後顯示效果以下：