onsdag 9. mars 2011

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):
The bottom border of the second last row stops after the second table cell.
How the page renders in FireFox
The bottom border of the second last row extends past the second table cell and stops after the third table cell
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.