Question

我有一张包含以下代码的表格给我带来了一些麻烦：

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

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

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

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以显示大量数据。 enter image description here

表CSS的单元溢出问题

2 个答案: