Centralize a table (HTML)

Asked

Viewed 47,771 times

5

I made a table in mine HTML, but I couldn’t center it in the middle of the screen.

She’s vertical and I’ve tried putting the text-align:center but it didn’t help.

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>

html css bootstrap-3

  • Ready. I edited the question

  • But how do you expect your table to look? It is correctly represented by what you have put, there are several lines (tr) and in each row there is a header (th). With this, it will stay the way it is represented in the snippet.

  • I expect it to be in the middle of the screen. It is a vertical table, and receives TD data from an API. Only it is not centered in the middle of the screen

  • But it’s centered... at least it’s like what the snippet is.

  • But when I see Chrome, he’s not in the center, he ends up getting a little on the left side

  • It may be that she doesn’t get centered because of the td that comes after and then doesn’t appear

  • @Nazarelisboa see if my answer helps you

Show 2 more comments

5 answers

9


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

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

Example:

  margin:auto; /* Centraliza sua tabela */

In your case only the command margin it won’t help that the classes of bootstrap by default define that the table will take up all space allowed, so you must decrease its size so that the margins are noticed:

width: 50% !important;margin: auto;

See the example below, I put red edges 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>

<!-- Bootstrap CSS -->
<link rel="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>

  • It worked. You know how I can keep the status table away from the others?

  • I added a class to the status table .table-status and put a margin above and below it. This is what you wanted, if any of the answers met your need I ask you to signal as correct.

  • Exactly! Can you ask me a question? When the TD of the table is formed, the TD’s come from the API that I pull, they end up floating a little higher, you know the reason why?

  • It’s hard to conclude without seeing how the code works, what I would do to analyze is inspecionar the element by the browser to see how the CSS, If you cannot solve this way I suggest opening a new question.

  • Right. Take away another question from your code? What is the "! Charge"?

  • Briefly forces css to comply by setting a priority for a given instruction, see: https://answall.com/a/25312/88202

  • Okay. Thank you very much!

Show 2 more comments

0

One of the possible solutions to centralize the table would be to define the CSS the left banks (margin-left) and right (margin-right) table with value auto:

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

  • It didn’t work. It might be pq to doing on bootstrap

  • 1

    @Nazarelisboa This must be happening because in the code CSS of bootstrap there should already be some definition of margins for the table, which is generating a conflict of definitions CSS.

  • @Leandro is right, because, just open the bootstrap.min.css you will see that has style for table, but I do not know if it will meet your need I will post what I found in my answer below

0

Use the following class as a parent class for anything 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;
       }

-2

Go to the CSS of 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 which is more direct, and works best.

-3

I managed to change it only after table and it centered on html. WELCOME TO THE CHARISMA! ** row 1 column 1 row 1 column 2 row 1 column 3 row 2 column 1 row 2 column 2 row 2 column 3 row 3 column 1 row 3 column 2 row 3 column 3 row 4 column 1 row 4 column 2 row 4 column 3

Browser other questions tagged html css bootstrap-3

You are not signed in. Login or sign up in order to post.