Center one CSS table element

Navigation
3

I want to center a table using CSS in an HTML page. Not the content of the fields (row-columns) of the table, but the table. The table element.

Code: 

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

CSS code tried: 

#tabla{
     display: table;
}
    
asked by omaza1990 06.01.2018 в 23:35
source

3 answers

4

Block-type elements (such as div ), by default, will get 100% of the available width, so in this case your div container will occupy 100% of the screen .

To center the table within that div, you should not focus so much on the container, but on the content, that is, on the table.

Using margin: auto on the table you would have your table centered within the page.

Your modified example: 

#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>
    
answered by 06.01.2018 / 23:42
source
0

You can also center it with: margin: 0 auto;

note: change the width so you can see the centering 

#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>
    
answered by 07.01.2018 в 00:09
0

Center it Horizontally: width: 600; 

#Table{
   margin: auto;
}

Center it horizontally and vertically: width: 600; height: 600; 

#Table{
   position: absolute;
   left: 50%;
   margin-left: -300px;
   top: 50%;
   margin-top: -300px;
}
    
answered by 07.02.2018 в 05:08
Error Mysqli mysqli_query () expects parameter 1 to be mysqli, even if I am already giving you the two parameters that you request [duplicated] How to make use of the $ filter AngularJs