Max-Width solution in IE9 (with text-overflow)

Question

I'm trying to use a max-width property in IE9. It is being used on a tablecell with a dynamically generated width (I'm using dataTables). I also am using "text-overflow:ellipsis;" so that it basically has the effect of cutting off the characters visually, but I cannot do this without a max-width.

I don't want to define a set width on each table cell, as the dynamically created ones work just fine in every other case.

Here is my CSS:

.tableViewer tbody tr td {
max-width:220px;
overflow:hidden;
text-overflow: ellipsis;
 color: #000000;
font-size: 12px;
margin: 0 0 0 20px;
padding: 5px 5px 5px 10px;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
/*border-bottom:  1px solid #D8D8D8; */
 -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

The HTML, as said before is generated via DataTables. But here is it in it's rendered form:

<tr class="odd">
<td class=" sorting_1" title="aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb@aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb.com" style="max-width: 220px; overflow: hidden; ">aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb@aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb.com</td>
<td class="" title="aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb" style="max-width: 220px; overflow: hidden; ">aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb</td><td class="" title="aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb" style="max-width: 220px; overflow: hidden; ">aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb</td>
<td class="" title="" style="max-width: 220px; overflow: hidden; "></td><td class="" title="" style="max-width: 220px; overflow: hidden; "></td>
<td class="" title="" style="max-width: 220px; overflow: hidden; "></td><td class="" style="max-width: 220px; overflow: hidden; ">2 <a href="#">view</a></td></tr>

Sorry for the long titles, but that's why I'm trying to figure this out. Anyone have any suggestions?

EDIT:

Upon request, here's a JSfiddle showing the CSS/HTML and the problem! http://jsfiddle.net/PY4cb/

I use `text-overflow: ellipsis` without setting a `max-width` and it works just fine... the only thing really different about my css from yours is that I also use `white-space: nowrap` — MrOBrian, Oct 10 '12 at 18:31
What's the function of white-space:nowrap? I've added and come up with nothing in IE9. — streetlight, Oct 10 '12 at 18:34
[here's the MDN page on white-space](https://developer.mozilla.org/en-US/docs/CSS/white-space) Could you create a jsFiddle that replicates your problem? — MrOBrian, Oct 10 '12 at 18:37
Great `white-space` article: http://www.impressivewebs.com/css-white-space/ — tomaroo, Oct 10 '12 at 18:50
Checked out the article -- it is pretty awesome, but I tried some solutions from it and it's helping me with this particular issue. Is there anyway you could look at the JSfiddle? — streetlight, Oct 10 '12 at 18:53
@MrOBrian -- I keep testing the solution to no avail. Have you ever seen anything like this before? — streetlight, Oct 10 '12 at 19:11
check out [this similar question](http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell) to see if anything in there helps — MrOBrian, Oct 10 '12 at 19:29

score 1 · Accepted Answer · answered Oct 11 '12 at 11:40

Okay, so I figured out the answer (thanks to some pointers from @MrOBrian) -- the containing table needs to have this attribute:

table-layout: fixed;

In only IE. IE, for some reason or another, won't accept max-width in cells in a table that doesn't have this element (while all other browsers can).

Max-Width solution in IE9 (with text-overflow)

1 Answers1