How can I truncate table cells while yet allowing for as much content as possible?

Problem

Let me introduce you to Fred. He’s a desk:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

Fred’s apartment has a strange habit of shrinking, so he’s learned to hide some of his belongings so that he doesn’t knock over the other units and drive Mrs. Whitford’s living room out of existence:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

This works, but Fred has a sneaking suspicion that if his right cell (nicknamed Celldito) gave up a little room, his left cell would be truncated less frequently. Is it possible for you to save his sanity?

In conclusion, how can the cells in a table overflow evenly and only when they’ve all given up all of their whitespace?

Asked by s4y

Solution #1

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

Answered by ladislav

Solution #2

I think I’ve come up with a non-JavaScript solution! I didn’t want to settle for a JavaScript solution because the little jitter of items shifting around after the page loaded is unacceptable to me.

Features:

How it works: Place two copies of the content in two distinct elements within a relatively-positioned container element inside the table cell. Because the spacer element is static, the width of the table cells will be affected. We can acquire the “best-fit” width of the table cells we want by allowing the contents of the spacer cell to wrap. This also allows us to employ the absolutely-positioned element to limit the displayed content’s width to that of the parent’s relative position.

IE8, IE9, IE10, Chrome, Firefox, Safari, and Opera have all been tested and found to work.

Result Images:

JSFiddle: http://jsfiddle.net/zAeA2/

Sample HTML/CSS:

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

Answered by Jeff Camera

Solution #3

A few days ago, I was confronted with the identical problem. Lucifer Sam seemed to have discovered the greatest solution.

But I noticed you should duplicate content at spacer element. Thought it’s not so bad, but I’d like also to apply title popup for clipped text. And it means long text will appear third time in my code.

To construct spacer and maintain HTML clean, I propose accessing title attribute from:after pseudo-element.

Works with Internet Explorer 8+, Firefox, Chrome, Safari, and Opera.

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

Answered by Henry Feesler

Solution #4

There is a lot more simple and elegant solution.

Within the table-cell that you want to apply truncation, simply include a container div with css table-layout: fixed. This container is responsive since it takes up the entire width of the parent table cell.

Make sure that the elements in the table are truncated.

Works from IE8+

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

and css:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

https://jsfiddle.net/d0xhz8tb/ is a functional Fiddle.

Answered by satyavh

Solution #5

Add the following rules to your to-do list:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

Example:

PS: If you want to give another td a custom width, use the min-width property.

Answered by Alexandre Annic

Post is based on https://stackoverflow.com/questions/5239758/how-can-i-truncate-table-cells-but-fit-as-much-as-content-possible