谁能帮助我了解如何将我的 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>