谁能帮助我了解如何将我的html表居中？

Question

所以我有一组看起来像这样的表

当我在其中添加信息时，他们最终却在整个地方都这样看

我表格的当前格式只是试图通过使用相对位置和像这样上下左右的像素来使它们居中

   #damagetablemario {
    display:none;
    position:absolute;
    top:700px;
    left:80px;
    border-collapse:collapse;
}
   #damagetablemario2 {
   display:none;
   position:relative;
   top:400px;
   left:110px;
   border-collapse:collapse;
}
   #damagetablemario3 {
   display:none;
   position:relative;
   top:450px;
   left:540px;
   border-collapse:collapse;
   margin-bottom:200px;
}




    <table id = "damagetablemario">
      <tr>
      <th>Neutral</th>
      <th>Forward  Tilt</th>
      <th>Up Tilt</th>
      <th>Down-Tilt</th>
      <th>Forward-Smash</th>
      <th>Up-Smash</th>
      <th>Down-Smash</th>
      <th>Neutral-Air</th>
      <th>Forward-Air</th>
      <th>Back-Air</th>
      <th>Up-Air</th>
      <th>Down-Air</th> 
   </tr>
   <tr>
      <td class = "Neutral">2.2% (punch)<br>1.7% (punch)<br> 4% (kick)</td>
      <td class = "Forward-Tilt">7%</td>
      <td class = "Up-Tilt">5.5%</td>
      <td class = "Down-Tilt">5% (foot) <br> 7% (body)</td>
      <td class = "Forward-Smash">17.8% (fire)<br> 14.7% (arm)</td>
      <td class = "Up-Smash">14%</td>
      <td class = "Down-Smash">10% (front)<br> 12% (back)</td>
      <td class = "Neutral-Air">8% (clean)<br> 5% (late)</td>
      <td class = "Forward-Air">12% (early)<br> 14% (clean)<br> 10%(late)</td>
      <td class = "Back-Air">10.5% (clean)<br> 7% (late)</td>
      <td class = "Up-Air">7%</td>
      <td class = "Down-Air">1.4% (1-5 hits) <br>
         5.5% (hit  6) <br>
         2% (landing)
      </td>
   </tr>
</table>

我不知道如何使它们以其他任何方式居中。任何人都有解决此问题的方法吗？

https://jsfiddle.net/yt09175x/3/

Answer 1

您要将左页边距设置为特定数字，因此表格从这些位置开始，并且添加数据使表格的大小发生偏差。

您可以通过多种方式解决此问题，但这是我的建议：

table.center {
    margin-left:auto; 
    margin-right:auto;
  }

<table class="center">
  <tr>
    <td>First</td>
    <td>Second</td>
    <td>Third</td>
    <td>Fourth</td>
   </tr>
 </table>
 <table class="center">
   <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
    <td>Six</td>
    <td>Seven</td>
   </tr>
 </table>
 <table class="center">
   <tr>
    <td>AAAA</td>
    <td>BBBB</td>
   </tr>
 </table>