與表CSS細胞溢出問題

Question

我有一個表與下面的代碼是給我帶來些麻煩：

演示http://jsfiddle.net/hF3vt/

[HTML]

<table> 
    <tr> 
     <th style="width: 18%;">Col 1</th> 
     <th style="width: 12%;">Col 2</th> 
     <th style="width: 13%;">Col 3</th> 
     <th style="width: 7%">Col 4</th> 
     <th style="width: 7%">Col 5</th> 
     <th style="width: 6%">Col 6</th> 
     <th style="width: 5%">Col 7</th> 
     <th style="width: 13%">Col 8</th> 
     <th style="width: 16%">Col 9</th> 
     <th style="width: 3%">Col 10</th> 
    </tr> 
    <tr> 
     <td>Some</td> 
     <td>Data</td> 
     <td>Stuff</td> 
     <td>foo</td> 
     <td>bar</td> 
     <td>etc</td> 
     <td>whatever</td> 
     <td>stuff</td> 
     <td>Alotofdatainthiscell</td> 
     <td>Yes</td> 
    </tr> 
</table> 

[CSS]

table { 
    display: block; 
    margin: 30px 0 auto 0; 
    width: 100%; 
    max-width: 1300px; 
    text-align: left; 
    white-space: nowrap; 
    border-collapse: collapse; 

    z-index: -1; 
} 

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

正如你所看到的，我試圖根據窗口動態調整表的大小，直到它達到1300px，然後有一個設置的大小。

一切工作正常，直到我有一個單元格中的數據太多，導致它變得比它應該由於某種原因更寬。爲了解決這個問題，我嘗試添加省略號溢出，但是當我添加它時什麼也沒做。然後我記得max-width是需要的，所以我向每個單元格添加了類，以匹配max-width中的標題百分比大小，但除非以像素指定最大寬度，否則由於某種原因不起作用。我想知道是否有更好的方法來防止這個省略號溢出的事情，而不必在每個單元格上指定它，或者如果這是最大寬度不適用於百分比的原因。

摘要： 長文本忽略了單元格的寬度，我希望它在變長時變成省略號，但不是因爲某種原因。

Answer 1

當你調整它的正確邊界時，它會以良好的方式顯示。沒有邊框，這是因爲您將寬度與每個表格標題對齊，而不是<td>。

這裏是更新的小提琴：

Demo Here

Answer 2

您可以通過設置一個寬度爲表做到這一點，你也可以使用

word-wrap:break-word 

此外，如果你想換行您必須指定該元素的寬度或最大寬度，以便瀏覽器知道如何包裝文本內容。

爲了防止真正長的字突破界限。 而對於表，

table-layout:fixed; 

因此， 更改CSS來此：

table { 
    display: block; 
    margin: 30px 0 auto 0; 
    width: 100%; 
    max-width: 1300px; 
    text-align: left; 
    white-space: nowrap; 
    border-collapse: collapse; 
    z-index: -1; 
    table-layout:fixed; 
} 

td { 
    max-width:100px; 
    overflow: hidden; 
    word-wrap:break-word; 
    white-space: nowrap; 
    text-overflow:ellipsis; 
} 

編輯： 你可能喜歡的溢出設置爲auto，顯示大量的數據。