How can I use ellipses in a fluid width table without making each column the same size?

Question

Let's say my columns in a table are id, name, description, and phone. The description column is 1-255 characters, but the id is only max 3 characters.

I'd like the columns to be appropriately sized rather than each column being the same size. And I'd like the description column to overflow to an ellipsis when the window is too small to fit the contents in its entirety.

table-layout:fixed; is the standard way to make text-overflow: ellipsis; work, but it resizes all the columns to the same size. I'd prefer to keep the widths auto rather than fixed.

Can you help?

Here's my jsFiddle: http://jsfiddle.net/RQhkk/1/

Here's a screenshot of what I'm dealing with:

Notice how Table 1 makes all columns the same size? That's awful.

Notice how Table 2 sizes the columns based on content? That's good. Except when the content is too long: Table 3. Then it doesn't fit. In that case I'd like it to overflow to an ellipsis.

And here's my html table and css code:

<div id="t1">
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th class="ellipsis">description</th>
            <th>phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>alpha</td>
            <td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>2</td>
            <td>beta</td>
            <td class="ellipsis">Sed et nulla neque.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>3</td>
            <td>gamma</td>
            <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
            <td>555-555-5555</td>
        </tr>
    </tbody>
</table>
</div>

<style>
#t1 table {
    table-layout:fixed;
    width:100%;
}
#t1 td {
    white-space: nowrap;
}
#t1 td.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
</style>

If I remove the table-layout: fixed; the column widths are what you'd expect - sized to the content. Unfortunately I just can't get the ellipsis to work without the fixed layout. Where am I going wrong?

Magnetize

Answer 1

It should work if you specify a max-width for td.ellipsis.

Arnoldarnoldo

Nice! That does help. However it the other smaller columns are taking up much more white space than necessary. Check out the updated fiddle: jsfiddle.net/RQhkk/3 Notice Table 3 now has the max-width on the ellipsis class. But the other columns are much larger than they need to be. Any suggestions? I'd like the columns to look much more like table 2, but with the elipsis as necessary. – Magnetize

Answer 2

The solution I found is to style your cells as follows:

td{
    white-space: nowrap;
}

td.description{
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px;    
    width: 100%;
}

The first part will force each column to contract as much as possible and ellipsize any clipped text in any cell. However, they will not contract to 1px, because you can use your table-headers to provide a min width. It also prevents line-wrapping within the table.

The second part ensures that all spare space is taken up by the description column, rather than being spread evenly between all columns.

Finally, if you want to impose a true minimum width on the description column, do so by putting the minimum width on the column header rather than on the column cells, as, the max-width aside, the cells cannot contract to be thinner than the header.

See http://jsfiddle.net/BCZTB/ for an implementation.

Archean

your solution doesn't match your fiddle. (the solution seems right.) – Unapt

this is not working for me in IE8. with table-layout: fixed, i get equal columns. without table-layout: fixed the table is wider than 100%. – Unapt

Fiddle doesn't work with IE9 - table is wider than 100%, full content instead of ellipsis is displayed. – Aftermath

hello from 2023, when IE is died: thanks for you solution, works as I want – Villainous

Answer 3

My solution is to use jquery to get the max width of the text within the column and assign them to the contents width, except for the ellipsis column which will be the maximum size.

My jsfiddle example can be found here http://jsfiddle.net/qt7eQ/1/

<script type="text/javascript">
$(function() {
    //add a innerParagraph block element to all columns except for the one that has the class ellipsis
    $( "#t3 tr td:not(.ellipsis)" ).wrapInner(function() {
          return "<p class='innerParagraph'></p>";
    });

    //get the first column and assign it the width of the elements in the first column
    $( "#t3 tr th:nth-child(1)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(1) p" ) );
    $( "#t3 tr td:nth-child(1)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(1) p" ) );

    //get the second column and assign it the width of the elements in the second column
    $( "#t3 tr th:nth-child(2)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(2) p" ) );
    $( "#t3 tr td:nth-child(2)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(2) p" ) );

    //get the fourth column and assign it the width of the elements in the forth column
    $( "#t3 tr th:nth-child(4)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(4) p" ) );
    $( "#t3 tr td:nth-child(4)" ).width( getMaxWidthOf( "#t3 tr>td:nth-child(4) p" ) );
});


function getMaxWidthOf(selector){
    var maxWidth = 0;
    //go through each paragraph in the right column and find the widest value.
    $(selector).each(function() {
        if(maxWidth < $(this).width()){
            maxWidth = $(this).width();
        }
    });
    // assign max width to column
    return maxWidth;
}
</script>

<!-- add this style -->
<style type="text/css">
#t3 table {
    table-layout:fixed;
{
.innerParagraph {
    margin:0;
    display:inline-block;
}
</style>

Butacaine