Hola, tengo este botón que muestra una tabla.
<input id="toggleVisibilityButton" type="button" value="Button1"/>y esta funcion para el boton
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"; });Quiero hacer que la mesa esté centrada, ¿cómo puedo hacer eso? Nota: Traté de centrarlo con esto
#tabel_in_reparatie { margin-left:auto; margin-right:auto; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; }pero no funcionará.
La forma más fácil de centrar una mesa es usar un 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>