How to center-align an HTML child table within a parent table via CSS
42,045
Solution 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
Solution 2
<table style="width: 100%;">
<tr>
<td>
<table style="width: 760px; margin: auto;">
<tr>
<td>
ss
</td>
</tr>
</table>
</td>
</tr>
</table>
Author by
Jed
Updated on July 09, 2022Comments
-
Jed almost 2 years
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?