Table Colspan not working when Table tbody set to Display:block; - html

Question

I have a table with three sections, thead, tbody, and tfoot.
I wanted to have the tbody style set to display:block; so it would have scrollbars when it got to a certain height. But I noticed when I set the tbody style to display:block;, the colspans are not working in the table, as if the table is disregarding it. Is there something I am doing wrong, or is this a css3 bug?
Please refer to my example HTML & CSS for the table below (with JSfiddle)
Here is an image of my problem:
Here is what I'm trying to accomplish:
JSFIDDLE
http://jsfiddle.net/fT3EC/3/
TABLE:
<table>
<thead>
<tr>
<td class="name" colspan="2">Name</td>
<td class="price">Price</td>
</tr>
</thead>
<tbody>
<tr>
<td class="name" colspan="2">Product 1</td>
<td class="price">$100.00</td>
<td class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<tr>
<td class="name" colspan="2">Product 2</td>
<td class="price">$50.00</td>
<td class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<tr>
<td class="name" colspan="2">Product 3</td>
<td class="price">$10.00</td>
<td class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><b>Sub-Total:</b></td>
<td>$160.00</td>
</tr>
<tr>
<td colspan="2"><b>Free Shipping:</b></td>
<td>$0.00</td>
</tr>
<tr>
<td colspan="2"><b>Total:</b></td>
<td>$160.00</td>
</tr>
</tfoot>
</table>
CSS:
table {width:500px;}
tr,td {padding:5px; border:1px solid;}
.price {width:100px;}
.info {width:200px;}
tbody {
display:block; /* this is what causes the problem */
max-height:200px;
overflow-y:scroll;
}

Answer 1

defaut display of tbody is table-row-group, if you change it or set tbody in absolute or fixed position, it will not be part of the table-layout anymore.
In the flow with a reset on display, it will have the space of a first cell left. Browser will still try to keep coherent the layout. and will leave a gap for the missing cells.
You can try some work around, like using table-layout on table, so you can set you tbody block on 100% width. DEMO
tbody tr can optionnaly be set as display:table.
Anyhow, tbody will be off the flow of it's parent table, and columns will not be sized the same in tbody and theader
and with 3rd col overflowing
some cloning with jquery to avoid splitting table ?

Answer 2

Try splitting your table into three tables
One for the header
One for the body
One for the Footer
Then put a div around the body table which will allow you to control things like overflow: scroll; correctly

Answer 3

Forget the hacks, just don't use a table. Create a grid with divs, then you can have the behavior you want and it can be styled to look exactly the way you want.