overflow hidden not working in IE

Question

I am displaying some text in a TD. I have given overflow property hidden for td and this code works fine in Chrome, Safari, Mozilla but not in IE. I have used -ms- but it's also not working.

This is the code I'm using to create the table row

strRowTd += "<tr><td height=\"20\" style=\"-ms-display: block;" +
            "display: block;overflow:hidden;-ms-overflow:hidden;\" " +
            "class=\"body_text_white_mid\">" +
            "<strong>" + data[i + 1][4] + "</strong>";
strRowTd += "</td></tr>";

your question is not closed yet just because we think you will reply the comment of other user but if you wont response in some time then your question is in way of close — NullPoiиteя, Sep 22 '12 at 12:42
possible duplicate of [Overflow:hidden not working when using tables](http://stackoverflow.com/questions/1644215/overflowhidden-not-working-when-using-tables) — Patrick, Sep 22 '12 at 12:48

Warlock · Answer 1 · 2012-09-22T12:52:09.643

You have problems, because "overflow" works only on block level elements. Since table elements are not block elements you should should use <div> wrappers to get effect. The result Html markup should be looked like this:

<tr>
  <td class="body_text_white_mid">
    <div style="height:20px; overflow:hidden;">
      your data[i][j]
    </div>
  </td>
</tr>

And it will be better if you will use class instead of style. Also use String.Format(markupRow, data[i][j]) instead of strings concatenation.

score 1 · Answer 2 · answered Sep 22 '12 at 12:45

HTML tables support a "table-layout:fixed" css style that prevents the user agent from adapting column widths to their content. You might want to use it.

in order avoid problem with IE9 you need to use

For more info about this style take a look here http://msdn.microsoft.com/en-us/library/ie/ms531161(v=vs.85).aspx

overflow hidden not working in IE

2 Answers2