Table Cells lose border in Google Chrome PC

Question

The following code, in all browsers - apart from Google Chrome Latest on the PC - displays a border on the tbody table cells, as specified in the CSS.

Chrome PC, displays the thead border, but not the TD borders. Why? Is it a bug in Chrome, or in my HTML/CSS?

Heres a jsFiddle that replicates it:

<table width="505" cellspacing="0" cellpadding="0" border="0">
<tbody>
    <tr>
        <td>Testing</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Testing</td>
        <td>456</td>
    </tr>
</tbody>
<thead>
    <tr>
        <th>foo</th>
        <th>bar</th>
    </tr>
</thead>

table {
width:736px;
border-collapse: collapse;
thead {
    border-top: 2px solid #aaaaaa;
    tr {
        th {
            border: 0;
            padding: 12px 5px;
        }
    }
}
tbody {
    border-top:0;
     tr {
         td {
            padding: 10px 5px;
            border-top: 1px solid #aaaaaa;
            border-bottom: 1px solid #aaaaaa;
         }
     }

Answer 1

Try with putting tbody after thead.

HTML

<table width="505" cellspacing="0" cellpadding="0" border="0">
    <thead>
        <tr>
            <th>foo</th>
            <th>bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Testing</td>
            <td>123</td>
        </tr>
        <tr>
            <td>Testing</td>
            <td>456</td>
        </tr>
    </tbody>
</table>

JSFiddle

From MDN:

thead - A table element. The thead must appear after any caption or colgroup element, even implicitly defined, but before any tbody, tfoot and tr element.