Center a table (HTML)

Navigation
3

I made a table in my HTML , but I could not center it in the middle of the screen.

It is vertical and I already tried to put text-align:center but it did not work. 

td, th {
  padding: .7em;
  margin: 0;
  /*border: 1px solid #ccc;*/
  text-align: center;
}

th{
  /*background-color: #EEE;*/
}
td{
  font-weight:bold;
  /*background-color: #EEE;*/
}

table{
  width: 100%;
  margin-bottom : .5em;
  table-layout: fixed;
  text-align: center;
}
<div class="container">
  <div class="table-responsive">
      <table class="table" width="200px" align="center">
          <thead>
              <tr class="status">
                 <th class="cor">Status:</th>
              </tr>
          </thead>
    </table>
  </div>
</div>

<div class="container">
  <div class="table-responsive">
      <table class="table" width="200px" align="center">
          <thead>
              <tr class="cliente">
                 <th class="cor">Quantidade</th>
              </tr>
              <tr class="clientess">
                 <th class="cor">Nº.Pedido</th>
              </tr>
              <tr class="fiscal">
                 <th class="cor">Nota Fiscal</th>
              </tr>
              <tr class="entprevista">
                 <th class="cor">Entrega Prevista</th>
              </tr>
          </thead>
    </table>
  </div>
</div>
    
asked by anonymous 07.11.2017 / 12:07

4 answers

6

The text-align serves only to align the text of an element , so it is not able to align the table.

The margin property allows you to define the margins around the element (a space round, being a space left, right, top, bottom or automatically in the center of where the element is contained.)

Example: 

  margin:auto; /* Centraliza sua tabela */

In your case only the margin command will not work because the classes of bootstrap defaults to defining that the table will occupy all allowed space, so you must decrease its size so that the margins are noticed: 

width: 50% !important;margin: auto;

See the example below, I put red borders just to make the example more visual: 

.table-responsive{
  width: 100% !important;
}

.table {
    border: 1px solid red;
    width: 50% !important; /*Importante manter o !important rs */
    margin: auto;
}

.table-status {
    margin-top: 20px;
    margin-bottom: 20px !important;
}
<!-- Jquery incluido -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--BootstrapCSS--><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="table-responsive">
      <table class="table table-status">
          <thead>
              <tr class="status">
                 <th class="cor">Status:</th>
              </tr>
          </thead>
    </table>
  </div>
</div>

<div class="container">
  <div class="table-responsive">
      <table class="table">
          <thead>
              <tr class="cliente">
                 <th class="cor">Quantidade</th>
              </tr>
              <tr class="clientess">
                 <th class="cor">Nº.Pedido</th>
              </tr>
              <tr class="fiscal">
                 <th class="cor">Nota Fiscal</th>
              </tr>
              <tr class="entprevista">
                 <th class="cor">Entrega Prevista</th>
              </tr>
          </thead>
    </table>
  </div>
</div>
    
07.11.2017 / 12:48
0
One of the possible solutions for centering the table would be to set the CSS ( margin-left ) and right ( margin-right ) margins of the auto table to the %code% : 

.table{
  margin-left: auto;
  margin-right: auto;
}
<table class="table">
  <tr>
    <td>Coluna 1</td>
    <td>Coluna 2</td>
    <td>Coluna 3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
 </table>
    
07.11.2017 / 12:14
0

Use the following class as parent class for everything you want to center on the screen. 

    .poscentralized{

       -webkit-display: flex;
       display: flex;
       -webkit-align-items: center;
       align-items: center;
       -webkit-justify-content: center;
       justify-content: center;
       }
    
07.11.2017 / 13:15
-1

Go to the CSS to define: 

.table{
margin-left: auto;
margin-right: auto;
}

Or you can also put: 

.table{
margin-left: 50%;
margin-right: 50%;
}

But depending on your application, the second method may not work right. I recommend the first method that is more straightforward, and works better.

    
11.01.2019 / 04:26
Why does $ .post () not return an object? How do I use the same argument / parameter in two different functions?