0

Tenho a seguinte tabela, e gostaria de saber como eu consigo alinhar os valores de acordo com a coluna correspondente inserir a descrição da imagem aqui

Como da pra ver na imagem os valores estão desalinhados, o 9 que é referente a "GP" ele está muito pra direita, como eu posso resolver isso?

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

6
  • Poste o código para analisarmos Commented 22/06/2017 às 18:38
  • Coloquei o código em um bin se não ficaria mt grande ghostbin.com/paste/e4cfy
    – Willian
    Commented 22/06/2017 às 18:41
  • 1
    @Willian, por favor, leia sobre Exemplo Mínimo, Completo e Verificável. Será mais fácil para nós se você nos passar apenas o código HTML final, gerado pelo PHP, do quê com o PHP junto, pois assim conseguiremos reproduzir seu problema.
    – Woss
    Commented 22/06/2017 às 18:46
  • Editei e adicionei ao post, ou se preferir: ghostbin.com/paste/nahr8
    – Willian
    Commented 22/06/2017 às 19:31
  • O seu exemplo de código não é o mesmo da imagem. Tente adicionar uma borda nas colunas e ver o resultado, pois no teste que fiz aqui tudo parece correto - jsfiddle.net/3gkdnrfx Commented 22/06/2017 às 19:45

1 Resposta 1

1

Você esta praticamente formatando toda a tabela para "left" (esquerda) em seu atual CSS:

 .stats table tbody tr td 

Isso ocorre porque você esta usando text-align: left; para stats table tbody tr td tente remover a formatação de td realizando a formatação separadamente, por exemplo, onde esta:

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

Substitua por:

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

Agora crie uma regra CSS apenas para a td, adicione esse código ao seu CSS:

td, th {
    text-align: center;
}

Salve e recarregue a página que tudo deverá funcionar bem, se desejar ajustar ainda mais a centralização, mude de text-align: left para text-align: center no código CSS de .stats table tbody tr

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .