ansaurus

Question

Internet Explorer 8 table cell width bug with colspan set

Answer 1

A:

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>

Ray 2010-03-09 21:47:13

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 2010-03-09 22:34:33

Answer 2

A:

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.

Alohci 2010-03-09 22:10:33

Answer 3

+3 A:

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"&gt;
<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"&gt;
<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?

Luke 2010-03-09 22:43:29

Answer 4

+1 A:

Hi, my name si Libor Skočík, email [email protected]

Here is my result for failed td width IE8 - td width 100%, no right auto

Example http://www.soft-sk.cz/t-ie8.html

Libor Skočík 2010-06-09 09:04:40

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 2010-06-10 14:07:14

Answer 5

A:

Does it still work if your table is wider than your screen's width?

2010-08-16 15:09:04

Answer 6

A:

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.

ogradyjd 2010-10-28 13:59:04

ansaurus

tags:

views:

answers:

Internet Explorer 8 table cell width bug with colspan set

related questions