3

Deseo centrar una tabla mediante CSS en una página HTML. No el contenido de los campos (filas-columnas) de la tabla, sino la tabla. El elemento tabla.

Código:

<div id="mostrar_tabla">
    <form action="<?php echo $_SERVER['PHP_SELF'];?>" name="tabla_datos" id="tabla_datos" method="POST">
       <table class="table table-striped" id="tabla" name="tabla" width="600" border="2" cellspacing="3" cellpadding="3" style="font-size: 10pt">
             ...........
       </table>
    </form>
</div>

Código CSS intentado:

#tabla{
     display: table;
}

3 respuestas 3

13

Los elementos de tipo bloque (como el div), por defecto, van a obtener el 100% de la anchura disponible, por lo que en este caso tu div contenedor va a ocupar el 100% de la pantalla.

Para centrar la tabla dentro de dicho div, no tendrías que centrarte tanto en el contenedor, si no en el contenido, es decir, en la tabla.

Utilizando margin: auto sobre la tabla tendrías tu tabla centrada dentro de la página.

Tu ejemplo modificado:

#tabla{
    margin: auto;
}
<div id="mostrar_tabla">
    <form action="<?php echo $_SERVER['PHP_SELF'];?>" name="tabla_datos" id="tabla_datos" method="POST">
       <table class="table table-striped" id="tabla" name="tabla" width="600" border="2" cellspacing="3" cellpadding="3" style="font-size: 10pt">
       <tr>
          <td>Celda</td>
          <td>Celda</td>
       </tr>
       </table>
    </form>
</div>

0

Tambien lo podes centrar con: margin: 0 auto;

nota: lo cambien el ancho para que se pueda apreciar el centrado

#tabla {
  width: 100px;
  margin: 0 auto;
}
<div id="mostrar_tabla">
  <form action="<?php echo $_SERVER['PHP_SELF'];?>" name="tabla_datos" id="tabla_datos" method="POST">
    <table class="table table-striped" id="tabla" name="tabla" width="600" border="2" cellspacing="3" cellpadding="3" style="font-size: 10pt">
      <tr>
        <td>Celda</td>
        <td>Celda</td>
      </tr>
    </table>
  </form>
</div>

-1

Centrarlo Horizontalmente: width: 600;

#Table{
   margin: auto;
}

Centrarlo horizontal y verticalmente: width: 600; height: 600;

#Table{
   position: absolute;
   left: 50%;
   margin-left: -300px;
   top: 50%;
   margin-top: -300px;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.