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