How can I truncate table cells, but fit as much as content possible?

Question

Meet Fred. He's a table:

<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 bizarre habit of changing size, so he's learned to hide some of his content so as not to push all the other units over and shove Mrs. Whitford's living room off into oblivion:

<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 nagging feeling that if his right cell (which he's nicknamed Celldito) gave up a little space, his left cell wouldn't be truncated quite as much of the time. Can you save his sanity?

---

In summary: How can a table's cells overflow evenly, and only when they've all given up all their whitespace?

Answer 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/

Answer 2

I believe I have a non-JavaScript solution! I didn't want to settle for a JavaScript fix because I find the slight jitter of things moving around after the page is loaded to be unacceptable.

Features:

• No JavaScript
• No fixed-layout
• No weighting or percentage-width tricks
• Works with any number of columns
• Simple server-side generation and client-side updating (no calculation necessary)
• Cross-browser compatible

How it works: Inside the table cell place two copies of the content in two different elements within a relatively-positioned container element. The spacer element is statically-positioned and as such will affect the width of the table cells. By allowing the contents of the spacer cell to wrap we can get the "best-fit" width of the table cells that we are looking for. This also allows us to use the absolutely-positioned element to restrict the width of the visible content to that of the relatively-positioned parent.

Tested and working in: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

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