html - 表格 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;
}

如您所见，我正在尝试根据窗口动态调整表格大小，直到达到 1300 像素，然后设置大小。

一切正常，直到单个单元格中的数据过多，导致它由于某种原因变得比应有的更宽。为了解决这个问题，我尝试添加省略号溢出，但是当我添加它时什么也没做。然后我记得需要最大宽度，所以我向每个单元格添加了类以匹配最大宽度中的标题百分比大小，但由于某种原因这不起作用，除非我指定了以像素为单位的最大宽度。我想知道是否有更好的方法来防止省略号溢出而不必在每个单元格上指定它，或者最大宽度不能与百分比一起使用是否有原因。

总结:长文本忽略了单元格的宽度，我希望它在太长时变成省略号，但不是出于某种原因。

Answer 1

当您将其对齐到正确的边框时，它将以良好的方式显示。没有边框，这是因为您将宽度与每个表头对齐，而不是与 <td> 对齐.

这是更新后的 fiddle :

Demo Here