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 像素，然后设置大小。

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

摘要：长文本忽略了单元格的宽度，我希望它在太长时变成椭圆，但由于某种原因它不是。

Answer 1

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

这是更新的小提琴：

在这里演示

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为显示大量数据。