Menu
I want to display text in the table and I want to cut it when it is wider than 150px, but I don't want fixed width of the table cell (if there is no text, width will be 0px). Everything works in IE9, Firefox, Chrome, Opera but not in IE8.
Code example in IE8:
Code example in Chrome:
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
td, span {
border: 1px solid red;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
span {
border: 1px solid green;
display: block;
}
</style>
</head>
<body>
<table>
<tr>
<td><span>Works in Firefox, Chrome, Opera, IE 7/9 (but not in IE 8)</span></td>
<td>Works in Firefox, Chrome (and Opera but no dots)</td>
<td style="display: block">Works in Firefox, Chrome and Opera (with dots)</td>
</tr>
</table>
</body>
</html>
It is possible do so without any javascript or setting fixed width?
261
Unfortunately IE7 and IE8 have very buggy support for the max-width css rule. So no, you won't be able to do that reliably without javascript or fixed widths. If it helps, the code you have is supposed to work in IE 7+.
But you could make it only fixed width for those two browsers by adding a conditional css rule after the rules you have above:
<!--[if lte IE 8]>
<style>
td, span {
width: 150px;
}
</style>
<![endif]-->
When you later move your css into an external file, you would of course change that to a link tag:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
Alternatively, you can detect IE 7 and 8 with javascript and redirect the user to this page: http://www.mozilla.org/de/firefox/new/
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
