Align table columns

Asked

Viewed 1,584 times

0

I have the following table, and would like to know how I can align the values according to the corresponding column inserir a descrição da imagem aqui

As you can see in the image the values are misaligned, the 9 that refers to "GP" he is very to the right, how can I solve this?

.stats table tbody tr td {
  font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
  text-align: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-hover table-stripped">
  <thead>
    <tr>
      <td>#</td>
      <td>Jogador</td>
      <td>GP</td>
      <td>PTS</td>
      <td>AST</td>
      <td>OREB</td>
      <td>DREB</td>
      <td>REB</td>
      <td>STL</td>
      <td>BLK</td>
      <td>TO</td>
      <td>F</td>
      <td>FGM</td>
      <td>FGA</td>
      <td>FG%</td>
      <td>3PM</td>
      <td>3PA</td>
      <td>3P%</td>
      <td>FTM</td>
      <td>FTA</td>
      <td>FT%</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Keome</td>
      <td>10</td>
      <td>372</td>
      <td>33</td>
      <td>52</td>
      <td>46</td>
      <td>98</td>
      <td>108</td>
      <td>35</td>
      <td>101</td>
      <td>8</td>
      <td>179</td>
      <td>272</td>
      <td>65.8</td>
      <td>0</td>
      <td>1</td>
      <td>0</td>
      <td>13</td>
      <td>24
      </td>
      <td>
        54.2
      </td>
    </tr>
  </tbody>
</table>

html css table

  • Post the code for analysis

  • I put the code in a bin if it wouldn’t be too big https://ghostbin.com/paste/e4cfy

  • 1

    @Willian, please read about [mcve]. It will be easier for us if you just give us the final HTML code, generated by PHP, than with PHP together, so we can reproduce your problem.

  • I edited and added to the post, or if you prefer: https://ghostbin.com/paste/nahr8

  • Your example of code is not the same as the image. Try adding a border in the columns and see the result, because in the test I did here everything seems correct - https://jsfiddle.net/3gkdnrfx/

  • The code you posted is not behaving like the image you shared, as @Andersoncarloswoss suggested, post a minimal verifiable example so we can help you. :)

Show 1 more comment

1 answer

1

You’re practically formatting the entire table to "left" (left) in your current CSS:

 .stats table tbody tr td

This is because you are using text-align: left; for stats table tbody tr td try to remove the formatting of td performing the formatting separately, for example, where this:

.stats table tbody tr td {
  font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
  text-align: left;
}

Replace with:

.stats table tbody tr {
  font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
  text-align: left;
}

Now create a td-only CSS rule, add that code to your CSS:

td, th {
    text-align: center;
}

Save and reload the page everything should work well, if you want to adjust the centralization further, change text-align: left for text-align: center in the CSS code of .stats table tbody tr

Browser other questions tagged html css table

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