CSS table design not working

Question

Hi,

I have this table:

<table style="width: 512px; border-collapse: collapse;" cellspacing="0">
<tbody>
<tr>
<td style="background: #00f; height: 9px; width: 9px;"></td>
<td style="background: #0f0; height: 9px;"></td>
<td style="background: #f00; height: 9px; width: 9px;"></td>
</tr>
</tbody>
</table>

Please no "do not use tables" kind of messages. I am using tables here for clarity, trying to solve my issue.

The problem is that I see the result as http://ioj.com/v/if64c

Where is the green line? It should be 496x9!

Answer 1

If you add

table-layout: fixed;

to your table's css, it works.

(ref here)

This is because tables will auto-calculate column width based on cell contents by default.

Answer 2

<table style="width: 512px; border-collapse: collapse;" cellspacing="0">
<tbody>
<tr>
<td style="background: #00f; height: 9px; width: 9px;"></td>
<td style="background: #0f0; height: 9px; width: 9px;"></td><!-- use specific width -->
<td style="background: #f00; height: 9px; width: 9px;"></td>
</tr>
</tbody>
</table>