CSS: IE: white-space: nowrap not working
IE not properly responding to nowrap CSS attribute.
Question: How do I make this work in IE so that it renders as Chrome's rendering result.
http://jsfiddle.net/subsari/tmz0t0z2/3/
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td class="long_string">Data 1 with long text</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
th {
border: 1px solid red;
}
td {
border: 1px solid black;
}
.long_string {
white-space: normal;
white-space: nowrap;
max-width: 100px;
color: #FFA500;
}
How can I make IE render the table like Chrome does? Cleanest solution?
Thank you for your help ahead of time!
Answer
The issue is not with white-space: nowrap (the text stays on one line) but with the max-width setting. Although it is generally supported even by IE 7, IE 7 seems to have an issue with it when applied to a table cell, as well as some other oddities. (My observations are based on using IE 11 in different emulation modes, not actually testing on older versions of IE.)
If supporting IE 7 (and older) is important enough, you might consider setting specific width on the content rather than maximum width. To would then need to wrap the long string in a container and set width on it rather than on the table cell. You additionally need to set overflow: hidden on that container (otherwise the overflowing content still makes the cell wider). Example:
th {
border: 1px solid red;
}
td {
border: 1px solid black;
}
.long_string {
white-space: nowrap;
width: 100px;
overflow: hidden;
color: #FFA500;
}<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td><div class="long_string">Data 1 with long text</div></td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>