February 27, 2012
limit cell width with css and hide overflow – IE anomaly
Question by Mark Belli
I am having problems with a table.
It’s made of 3 cells each row, each cell has a max width and the text that doesn’t fit in the cells has to be discarded.
I already looked this:
How to limit a table cell to one line of text using CSS?
And I made the code.
http://jsfiddle.net/e3Eqn/222/
The problem is that I don’t understand why firefox, chrome, safari are ok with it and internet explorer displays a crazy formatting and does not consider the overflow:hidden!
Answer by Starx
A common problem again. However there is a easier workaround than to plunge in various techniques instead.
Use this format
<td>
<div>
Your longlonglongcontent
</div>
</td>
Then use this as CSS
td div { width: 100%; overflow: hidden; }
This will work in ff, opera and IE7
See your demo with this hack
