Align table columns

Question

Align table columns

Navigation

#1 by (1 votes)

0

I have the following table, and would like to know how I can align the values according to the corresponding column

Asyoucanseeintheimagethevaluesaremisaligned,the9thatisreferringto"GP" it is very far 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

asked by anonymous 22.06.2017 / 20:31

1 answer

Error while editing through SQLITE Permissions Error in WordPress - NextGEN Gallery

score 1 · Answer 1

You are practically formatting the whole table to "left" in your current CSS:

 .stats table tbody tr td

This is because you are using text-align: left; to stats table tbody tr td try removing the formatting from td by doing the formatting separately, for example, where it is:

.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 CSS rule just for td, add this code to your CSS:

td, th {
    text-align: center;
}

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