HTML: as table gets narrower, text-overflow should cut off more and more text

Question

I have a web page that has an HTML table generated by an ASP.NET control. The top row of the table emulates a toolbar. That top row is laid out sort of like this:

<tr>
  <td style="white-space:nowrap;">
    <span>Very long title</span>&nbsp;
  </td>
  <td>
    { bunch of hyperlinks with background images, emulating a toolbar }
  </td>
</tr>

I am stuck with the fact that this is a table, with the contents of the title area being put in a span, and probably with that inline style specifying no wrapping.

This table is supposed to narrow itself when the page narrows, and it does that pretty well. However, if the actual title text (which can vary) is too long, it effectively serves as a limit on how narrow the table can get, which can lead to overlapping with other things on the page. (I'm using IE8, BTW.)

I tried applying overflow:hidden, text-overflow:ellipsis, and display: inline-block to the span and adding a width value for the table cell, all through a stylesheet. (Display:block on the span doubled the height of the row, which I didn't want, so inline-block was my choice.) The title text appeared truncated, just as I wanted. But the table wouldn't get any narrower.

After messing around changing values and styles through IEDT I concluded that, when figuring out how narrow the table could get, the text was still counted as being its full length. The span was relatively short, only the text that appeared in the span appeared, but for table-cell width purposes, the text was still all there.

I didn't find this phenomenon documented anywhere, but maybe I just don't get around enough. :) If text-overflow can't help me, I guess I'll have to dynamically truncate the title through script, which I'd rather not do. Is there a way to do what I want solely through CSS?

Answer 1

Table's cells display behavior differs from usual behavior of blocks. To make it more typical you need to change table's table-layout property to "fixed" first and set table width:

table { table-layout: fixed; width: 100%; }

It will disable cell's automatic sizing it most cases. After that you can set td's width and overflow as usual.

td.title { white-space:nowrap;overflow: hidden; width: 200px; }

Here is example: http://jsfiddle.net/vS3qq/1/