Webkit colspan table border bug

Turns out that Webkit browsers (Google Chrome and Apple's Safari) has some problem rendering bottom border on table cells preceding a table cell with colspan when border-collapse is set to collapse. If the colspan-area is wider than the cells with bottom border the border will extend with the colspan.


Let's first look at the code used to generate this bug:

<style type="text/css">
 table {
  border-collapse: collapse;
  width: 200px;
 }
 td.Border {
  border-bottom: 2px solid #906;
 }
 .Blue {
  width: 100%;
  height: 20px;
  margin: 2px;
  background-color: #0cf;
 }
</style>
<table
    <tr>
     <td class="Border"><div class="Blue" /></td>
        <td class="Border"><div class="Blue" /></td>
        <td><div class="Blue" /></td>
        </tr>
    <tr>
     <td class="Border"><div class="Blue" /></td>
        <td class="Border"><div class="Blue" /></td>
        <td><div class="Blue" /></td>
        </tr>
    <tr>
     <td class="Border"><div class="Blue" /></td>
        <td class="Border"><div class="Blue" /></td>
        <td><div class="Blue" /></td>
        </tr>
    <tr>
     <td colspan="3"><div class="Blue" /></td>
        </tr>
</table>

And now how the code is rendered in Firefox 3.6 and Chrome 9 (Safari 5 renders exactly the same as Chrome):

How the page renders in FireFox

How the page renders in Chrome

So how do we fix this? Just replace this code:
<td colspan="3">...</td>
Width this:
<td colspan="2">...</td><td></td>

If you have any better solutions to this, please post them bellow.