Cell overflow issues with table css

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

Demo 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;
}

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.

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.

Answers


When you align it proper border then it will display in well manner. without border this is because you align the width to every table header and not to <td>.

Here is the updated fiddle:

Demo Here


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;

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;
}

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


Need Your Help

Why does std::map::lower_bound fail for maps of size 1?

c++11 map gcc standard-library clang

I may have stumbled upon a bug, but it might just be the way they implemented the standard library. Is the following a bug?

Error while retrieving neo4j node data through java

java database graph neo4j cypher

I have loaded about 60k nodes into neo4j through talend. I want to get access to these nodes through java. Java code is only able to fetch a single node which comes with neo4j itself i.e. 0th node....

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.