表css的单元格溢出问题 [英] Cell overflow issues with table css

问题描述

所以我有一个表格，包含下面的代码，给我一些麻烦：

So I have a table with the following code that is giving me some trouble:

演示 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，然后有一个集合大小。

As you can see by this I am trying to have the table sized dynamically according to the window until it hits 1300px and then has a set size.

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

Everything works fine until I have too much data in a single cell, causing it to become wider than it should for some reason. To fix this I tried to add the ellipsis overflow but that did nothing when I added it. I then remembered that max-width is needed so I added classes to each cell to match the header percent sizes in max-width but that didn't work for some reason unless I specified a max-width in pixels. I was wondering if theres a better way to prevent this ellipsis overflow thing without having to specify it on every cell, or if theres a reason that max-width doesn't work with percents.

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

Summary: Long text is ignoring the width of cells and I want it to turn into ellipses when its too long but its not for some reason.

推荐答案

您可以通过设置表格的宽度来做到这一点，也可以使用

You can do this by setting a width for the table and you could also use

word-wrap:break-word

此外，如果要封装元素的文本，您必须指定该元素的宽度或最大宽度，以便浏览器知道如何包装文本内容。

Further, if you want to wrap text of an element, you have to specify the width or max-width of that element so that browsers know how to wrap the text content.

为了防止真正的长字出现边界。
对于表，

In order to prevent really long words to break out of boundaries. And for table,

table-layout:fixed;

因此，
将CSS更改为：

Hence, Change CSS to this:

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

You may like to set overflow to auto to show the lot of data.

这篇关于表css的单元格溢出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！