Html 表CSS的单元格溢出问题

我有一个带有以下代码的表，这给我带来了一些麻烦：

演示

[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>

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，然后设置一个大小

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

总结：

---

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

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

对齐

以下是更新的小提琴：

---

您可以通过设置表格的宽度来完成此操作，也可以使用

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

，以显示大量数据。

---

这对长词没有任何影响，它们只是保持不变：p@lemondrop你想用长单词做什么？看到

oerflow:hidden

，我猜您只是想隐藏它们。我只想当单元格中的任何数据长度达到其宽度时，用省略号将其截断，但我尝试的似乎都不起作用。@lemondrop编辑了答案，添加

文本溢出：省略号到td，在我的代码中，适用于me@optim我猜是
断字：断字你在看哪个版本的浏览器？虽然我没有正确理解你的问题。这是你想要的吗