与表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，显示大量的数据。