How to center a table in html/js-CodePudding

Hello i have this button that shows a table.

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

and this function for the button

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";
});

I want to make the table centered, how can I do that? Note: I tried centering it with this

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

but it won't work.

CodePudding user response：

The easiest way to center a table is to use a flexbox.

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

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