CODEWITHSUNDEEP
htmlcssinternet-explorer-9
Populus
Populus

Reputation: 7680

IE9 table-layout fixed colspan not respected

I found this topic, mine is related but not the same:

Table rendering with cols and colspan on tds in IE9

The problem I am having is that the 2nd colspan=2 in my table is not being read by IE9, funnily enough it works find in IE7 and IE8, but not IE9. Maybe I've done something completely wrong so here it is:

HTML:

<table id="test">
    <tbody>
        <tr>
            <td>COLSPAN = 1</td>
            <td colspan="2">COLSPAN = 2</td>
            <td>COLSPAN = 1</td>
            <td colspan="2">COLSPAN = 2</td>
        </tr>
    </tbody>
</table>

CSS:

#test {
    width: 100%;
    border-spacing: 20px;
    border-collapse: separate;
    table-layout: fixed;
}

#test td {
    position: relative;
    background-color: #cccccc;
    box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
    padding: 10px;
}

jsFiddle: http://jsfiddle.net/DUCPp/1/

What is supposed to happen: enter image description here

What IE9 gives me: enter image description here

I am convinced this is a IE9 bug, but I haven't been able to find it on google (maybe I'm not searching the right keywords?). Any solutions or links to bug reports will be greatly appreciated!

UPDATE: I added an extra column after the 2nd colspan=2 column, and it will render correctly. I have deduced that if the last column in a row has colspan > 1, then it will only be rendered as if colspan = 1.

Any ideas on fixing? I'm now almost positive that this is a IE9 bug <_<

Upvotes: 3

Views: 3930

Answers (4)

RunnerIE
RunnerIE

Reputation: 1

I fixed a similar issue by adding the doctype declaration at the start of my HTML code. See http://www.w3.org/QA/2002/04/valid-dtd-list.html The specific declaration I added was for version 'HTML 4.01 Transitional'. i.e. placed before the initial tag.

Hope this helps?

Upvotes: 0

Gabriel Kohen
Gabriel Kohen

Reputation: 4286

What you want to do is set the width of columns through TH in the header because that's what the browser will use for determining the width of the table and columns in subsequent rows.

Have a look at the following example:

<table>
    <thead>
        <tr style="height: 0px;">
            <th style="width: 110px; height:0px;"></th>
            <th style="width: 160px; height: 0px;"></th>
            <th style="width: 210px; height: 0px;"></th>
            <th style="width: 110px; height: 0px;"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">Hello</td>
            <td>There</td>
        </tr>   
    </tbody>  
</table>

Upvotes: 1

Populus
Populus

Reputation: 7680

Heh... IE9...

Found a "fix"... idea came from: Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?

Basically I had to add a empty row with the correct # of empty cells in it:

<table id="test">
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>COLSPAN = 1</td>
            <td colspan="2">COLSPAN = 2</td>
            <td>COLSPAN = 1</td>
            <td colspan="2">COLSPAN = 2</td>
        </tr>
    </tbody>
</table>

Not pretty... and I needed to remove the padding for the cells in order for it not to display. Sigh...

jsFiddle: http://jsfiddle.net/DUCPp/5/

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

You don't appear to have defined any fixed widths for the columns. You should use something like this before the <tbody>:

<col span="6" style="width:16%;" />

Upvotes: 0

Related Questions