如何在 html/js 中将表格居中答案

【问题标题】：How to center a table in html/js如何在 html/js 中将表格居中
【发布时间】：2022-01-10 19:11:25
【问题描述】：

您好，我有一个显示表格的按钮。

<input id="toggleVisibilityButton" type="button" value="Button1"/>

按钮的这个函数

document.getElementById("toggleVisibilityButton").addEventListener("click", function(button) {    
    if (document.getElementById("tabel_in_reparatie").style.display === "none")             
        {document.getElementById("tabel_in_reparatie").style.display = "block";}
   
   else document.getElementById("tabel_in_reparatie").style.display = "none";
});

我想让表格居中，我该怎么做？注意：我试着用这个来居中

#tabel_in_reparatie {
    margin-left:auto;
    margin-right:auto;
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
}

但它不会起作用。

【问题讨论】：

标签： javascript php html css

【解决方案1】：

使表格居中的最简单方法是使用弹性框。

.flexbox {
  display: flex;
  justify-content: center;
}
td, tr, th {
  border: 4px solid black;
  padding: 10px;
}

<div class="flexbox">
  <table>
    <tr>
      <th>Head1</th>
      <th>Head2</th>
    </tr>
    <tr>
      <td>Cell1</td>
      <td>Cell2</td>
    </tr>
    <tr>
      <td>Cell1</td>
      <td>Cell2</td>
    </tr>
  </table>
</div>

【讨论】：