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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6032709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:38:39  来源:igfitidea点击:

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

csshtmlformatting

提问by Jed

I have the following HTML table format:

我有以下 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>

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.

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

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

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

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

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

回答by MikeM

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

margin:0 auto;在这个例子中工作,在 IE 7-9、FF 4、Chrome 11 中测试/工作

回答by John Ennis

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