如何通过CSS在父表中居中对齐HTML子表

时间:2011-05-17 14:52:37

标签: css html5 formatting

我有以下HTML表格格式:

<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>

由于HTML5不支持表格的'align = center',我试图弄清楚如何在上面示例中的子表中模拟CSS中的'align = center'。

我已经尝试过使用CSS margin属性而无济于事。

如何将上述示例中的子表居中?

2 个答案:

答案 0 :(得分:14)

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;在此示例中工作,在IE 7-9,FF 4,Chrome 11中测试/工作

答案 1 :(得分:5)

<table style="width: 100%;">
 <tr>
  <td>
    <table style="width: 760px; margin: auto;">
     <tr>
      <td>
      ss
      </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>