Give ellipsis in percentage

Question

I am trying to give ellipsis to a span element which is inside td element. The problem is that the ellipsis is working if and only if I give the span element a fixed width i.e width in pixels. But in my project, I can't use a fixed width to the span element. The span element must be completely stretched inside the respective td element which is possible by using width: 100%.

My question is: How to make the ellipsis work fine by stretching the span element completely inside the td element?

span {
    width: 100%;    /* In pixels, it is working fine */
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}

Here is the Fiddle

I am looking for a solution which can be a pure css or javascript or jQuery. The solution should work in IE8+ and firefox.

PS: I can't calculate the width of the span dynamically due to some project restrictions.

EDIT: I can't restrict the widths of the td elements, because I am implementing column resizable on td elements.

Answer 1

In short, you need to add this:

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

The cause is not in span element but because table's td elements do not have defined 33% width - they expand according to width of td content. To make them fixed width, you need to apply table-layout:fixed; rule to your table.

Live fiddle: http://jsfiddle.net/m5gGr/