How to center-align an HTML child table within a parent table via CSS

Question

I have the following HTML table format:

<table style="width: 100%;">
 <tr>
  <td>
   //How to center this table within the parent-table cell?
   <table style="width: 760px;">
    <tr>
     <td>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

Since HTML5 doesn't support the 'align=center' for tables, I am trying to figure out how to simulate the 'align=center' in CSS for the sub-table in my example above.

I've tried messin' around with the CSS margin attribute to no avail.

How do I center the sub-table in the example above?

Answer 1

table {border:solid 1px #0f0}
table table {border:solid 1px #f00;margin: 0 auto}

<table style="width: 100%;">
 <tr>
  <td>
   //How to center this table within the parent-table cell?
   <table style="width: 760px;">
    <tr>
     <td>
         Center This Table Dawg
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

margin:0 auto; worked in this example, tested/worked in IE 7-9, FF 4, Chrome 11