9

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:

enter image description here

Code example in Chrome:

enter image description here

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?

4
  • Frankly, if I were u I would just send a javascript alert when someone opens ur page with IE8. Don't bother making your page compatible with buggy IE browsers, it's Microsoft's fault not yours. Dec 13, 2011 at 9:27
  • About the first cell, it does not seems to work in IE7. I'm afraid it works only in IE9.
    – lorenzo-s
    Dec 13, 2011 at 9:34
  • @IntermediateHacker According to the CSS 2.1 spec the effect of max-width on a table cell is undefined. The spec is at fault, not Microsoft.
    – ZippyV
    Dec 13, 2011 at 15:29
  • ok, sorry. in IE 7 it doesn't work. no matter, I support only IE 8, IE9
    – qavid
    Dec 13, 2011 at 15:30

1 Answer 1

5

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/

2
  • maxWidth was introduced in Windows Internet Explorer 7.
    – ZippyV
    Dec 13, 2011 at 11:56
  • Yes, that's absolutely correct, I will make that correction. However, it is extremely buggy in IE 7 and 8, as the code in this question demonstrates. I myself witnessed this to work (in IE 7/8) on one computer, but not on another. And as lorenzo-s pointed out, it didn't work for him either. It's most likely update dependant, but whatever the reason, it's clearly not to be relied on in these browsers. Dec 13, 2011 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.