text-overflow: ellipsis problems in internet explorer

Question

I'm trying to shorten the length of columns in a certain table.

I'm using some jQuery to add text-overflow ellipsis and a few more css properties.
I also add a tooltip using some more jQuery. Here's my code:

$('#table_id tr td:not(:last)').css({
"text-overflow": "ellipsis",
"max-width": "110px",
"overflow": "hidden",
"display" : "block"
}).each(function (index, element) { $(element).attr("title", $(element).text()); });

Everything works fine in Firefox and Chrome, but (surprise! surprise!) IE7-9 renders the text in it's full length.

Any idea what am I doing wrong? Thanks!

P.S.
I've also tried specifying the "width" property with no avail.

Answer 1

You need white-space:nowrap; on the td as well. Additionally, table-layout:fixed; must be set on the table itself, or IE still won't cut off the text.

Answer 2

For anyone else that runs across this problem, I found that I had to define a height to make IE happy, height:20px;