html - td max-width in IE9

Question

I would like to limit width of columns in a table.

<!DOCTYPE html>
<style type="text/css">
table tr td {border:1px solid; max-width:2em; overflow:hidden; white-space:nowrap;}
</style>
<table>
    <tr><td>this is looooooooo ooooooooo ooooooooooooo ooooooooo ng text</td></tr>
</table>

The next code works well in Firefox (the cell has a limited width), but width is not limited in IE9.

http://stackoverflow.com/questions/5968779/how-to-make-ie-support-min-width-max-width-css-properties — F. Müller, Jan 28 '13 at 14:22

Sri · Accepted Answer · 2013-01-28T15:04:22.823

3

You need to add a div after the td like the following in HTML. Nothing within that div will stretch out the table cell.

Demo

<!DOCTYPE html>
    <table>
      <tr>
        <td>
          <div>
            this is looooooooo ooooooooo ooooooooooooo ooooooooo ng text
          </div>
        </td>
      </tr>
    </table>

Css:

table tr td {
    border:1px solid;
    max-width:2em;
    overflow:hidden;
    white-space:nowrap;
}

div {
  width: 2em;
}

Works great in IE8, Chrome and Firefox.

edited Jan 28 '13 at 15:04

answered Jan 28 '13 at 14:46

Sri

2,233
4
31
55

The table is generated with jquery datatable -> I cannot put the content of cells into divs. – nagy.zsolt.hun Jan 29 '13 at 07:13
@user1977315 Do you need white-space: nowrap in your style? – Sri Jan 29 '13 at 11:43

score -1 · Answer 2 · answered Jan 28 '13 at 14:22

-1

Try to use IE expressions width: expression(document.body.clientWidth > 901 ? "900px" : "auto");

answered Jan 28 '13 at 14:22

ssuperczynski

3,190
3
44
61

I am searching for a cross-browser solution (if there is one..). – nagy.zsolt.hun Jan 29 '13 at 07:11

html - td max-width in IE9

2 Answers2

Css: