Internet Explorer 8 table cell width bug with colspan set

Question

I have the following html page:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>A title</title>
</head>
<body>
    <table style="width: 700px; border: solid 1px green">
        <tr>
            <td style="border: solid 1px red;" colspan="2">A cell with a bunch of text.  The amount of text here increases the 'x' cell.<td>
        </tr>
        <tr>
            <td style="width: 100px; border: solid 1px purple;" >x</td>
            <td style="border: solid 1px blue;">Some sample text</td>
        </tr>
    </table>
</body>
</html>

In all browsers other than Internet Explorer (8), the cell with contents "x" has a width of 100px, and it's adjacent cell fills the rest of the table. In internet explorer 8, it's quite a bit bigger, and it's size varies depending on how much text is in the cell with colspan="2" set. Is there a fix for this bug in IE?

Did I mention that I loathe internet explorer? No? Well let it be known. — Luke, Mar 09 '10 at 21:27
I would +1 for intelligible error description, proper test case, and proper use of the `code` button on the first go, but I'm out of votes for today :) Somebody else do it for me please. — Pekka, Mar 09 '10 at 21:28

score 23 · Answer 1 · answered Mar 09 '10 at 22:43

Ok, this is pure insanity. Ray's answer worked for the initial test, but not for my real life example, which led me to create a second test case with Ray's fix:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="width: 700px;">
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="width:100px; background: green;"><input type="checkbox" value="1" /></td>
            <td style="width:600px;">blah</td>
        </tr>
    </table>

    <table style="width: 700px;" border="0">
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="width: 100px; background: red;"><input type="checkbox" value="1" /></td>
            <td style="width: 600px;">blah</td>
        </tr>
    </table>

</form>

</body>
</html>

For some reason, having the input elements within the first table cell makes Ray's solution not quite work.

The solution that did end up solving the real world case we were trying to fix required adding "table-layout:fixed" to the tables, and making the first row in the table have empty cells with the width's set. Here's a modified version of the previously example with the fix I just described:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="table-layout: fixed; width: 700px;">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="background: green;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

    <table style="width: 700px; table-layout: fixed;" border="0">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="background: red;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

</form>

</body>
</html>

Really Internet Explorer??? REALLY?

`table-layout: fixed` was the magic trick I needed for a similar problem of mine. Thanks! — Dimitar, May 28 '11 at 15:34

score 13 · Accepted Answer · edited Jan 23 '13 at 16:31

13

Here is my result for failed td width in IE8:

<table style="width: 100%;" border="1">
  <tr>
    <td style="width:auto;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>

<!-- IE8 HACK  100% WIDTH -->
<table style="width: 100%;" border="1">
  <tr>
    <td style="width:100%;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>

edited Jan 23 '13 at 16:31

TRiG

10,148
7
57
107

answered Jun 09 '10 at 09:04

Libor Skočík

146
1
2

1

Ah excellent! That works too. I tested it on the examples I posted above and it worked. So adding style="width: 100%;" to the table cells with colspan="2" also fixes the problem. – Luke Jun 10 '10 at 14:07
Also setting it to the width of the element fixes it for me. – chourobin Apr 10 '12 at 17:39

score 4 · Answer 3 · answered Oct 28 '10 at 13:59

Luke's answer with the "table-layout:fixed" is what finally did it for me. Without "table-layout:fixed", IE continued to ignore the explicit width declarations for the non-colspan cells. With it, everything worked, albeit by having to explicitly tell all the non-colspan cells what their width is instead of just flowing to the left like every other browser on the planet.

Final Score: Luke: +1 IE: Suck it.

score 1 · Answer 4 · edited Feb 06 '12 at 07:29

1

Use the setAttribute function. Attribute Name = "colSpan". This works on IE 8 and Firefox also.
Example :

cell.setAttribute("colSpan", 9);

edited Feb 06 '12 at 07:29

oers

18,436
13
66
75

answered Feb 06 '12 at 06:32

Sanath Nair

11
1

Ray · Answer 5 · 2010-03-09T21:52:53.033

0

Since you know the size of the table (700) you can work around the bug by setting the width of both cells in the second row. With the second cell set to 600 px, the table behaves.

But it still sucks.

Edit - here is another sucky workaround - add a blank image to the first cell to force the size, then add width of 100% to the xsecond cell:

<tr> 
  <td style="width: 100px; border: solid 1px purple;" >x<img src="\images\blank.gif" width="100" height="1" /></td> 
  <td style="border: solid 1px blue;width:100%;">Some sample text</td> 
</tr>

edited Mar 09 '10 at 21:52

answered Mar 09 '10 at 21:47

Ray

21,485
5
48
64

Your answer definitely worked for this simplified test case. However, I tried applying this to the large jumble of html on my real site, and ran into the same problem, only slightly different. See my answer below... – Luke Mar 09 '10 at 22:34

Alohci · Answer 6 · 2010-03-09T22:53:44.297

If you set the width of the first td (the one with colspan="2") to be 100px, then you get the behaviour you want, at least for this test case.

As far as I can tell the IE8 behaviour is correct according to CSS 2.1 spec here: http://www.w3.org/TR/CSS2/tables.html#width-layout section 17.5.2.2 Automatic table layout. Step 3 looks suspicious.

However, this is probably a spec bug, since it all seems very vague about many details. The algorithm in CSS 3 looks much more carefully specified.

EDIT: This also works with your second test case.

Internet Explorer 8 table cell width bug with colspan set

6 Answers6

Linked

Related