Table formating with CSS

Expected Table

I tried to create a table like this:

First Steps

Here you can see the code:

/*
 * Here are the styles for the background and tables.
 */
body    { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px }

p               { margin: 0px 60px 0px 60px ; padding: 5px 10px 5px 10px ;
                  display: block }
p table         { margin: 0px; padding: right: 0px;
                  table-layout: fixed;
                  display: block; border: 1px solid grey }
p table tr      { margin: 0px; padding: 0px }
p table tr td   { margin: 0px; padding: 5px 10px 5px 10px;
                  vertical-align: middle ; border: 1px solid black}
p table tr td.r { text-align: right }
p table tr td.l { text-align: left  }

p.b table       { width: 100% }

<p class="a">
  <table cellspacing="0">
    <tr>
      <td class="l">LEFT .............</td>
      <td class="r">............ RIGHT</td>
    </tr>
  </table>
</p>
<p class="b">
  <table cellspacing="0">
    <tr>
      <td class="l">LEFT .............</td>
      <td class="r">............ RIGHT</td>
    </tr>
  </table>
</p>

Here are the tables rendered by this browser:

LEFT ............. ............ RIGHT

First Results

IE has a problem with the second example

Firefox has a problem with both

Solution

Adding a 'width' style with a small value to each table cell

p.c table tr td { width: 1% }

<p class="c">
  <table cellspacing="0">
    <tr>
      <td class="l">LEFT .............</td>
      <td class="r">............ RIGHT</td>
    </tr>
  </table>
</p>

LEFT ............. ............ RIGHT

Findings

The adding a value to style 'width' seems to switch the rendering algorithm?
Here a raw version of the test: demo_raw.html
And here is the solution: demo_ok