IE9 table-layout fixed colspan not respected - html

Question

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:
What IE9 gives me:
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 <_<

Answer 1

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/

Answer 2

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>

Answer 3

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%;" />

Answer 4

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?