Cómo crear dos columnas iguales con un espacio fijo en el medio

Tengo una mesa con width:100% and it should have 3 columns as follows:

[50%-space/2][space][50%-space/2]

Now, I have this already

<table style="width:100%"><tr>
   <td>left</td>
   <td style="width:20px"></td> //space
   <td>right</td>
</table>

This works fine, as long as there is always a "left" and "right" width the same width, but it stops working if one has a different width:

<table style="width:100%"><tr>
   <td></td>
   <td style="width:20px"></td> //space
   <td>right</td> // right takes all the space from the first td
</table>

And if I set "left" and "right" each to 50%, the space in between is omitted:

<table style="width:100%"><tr>
   <td style="width:50%"></td>
   <td style="width:20px"></td> //space
   <td style="width:50%">right</td> // right takes all the space from the first td
</table>

Unfortunately, the space cannot be in % in this case (which would solve the problem easily). Also using CSS columns is not (yet) an option.

¿Existe alguna solucion para esto?

JSFiddle