text-align on a table in a cell (<table> inside a <td>)

Question

Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!

It's very simple, but I don't understand why it doesn't work:

I have a table inside a cell, and I have style="text-align:right" on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.

Code is basically:

<table width="1000" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td style="text-align:right">

      <table border="1">
        <tr><td>Hello</td><td>Hello 2</td></tr>
      </table>

    </td>

    <td>Hello 2</td>
  </tr>
</table>

I don't want the nested table to be width=100% or anything like that...

Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?

Answer 1

My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.