Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Table em Bootstrap - Dificuldade pra criar última linha da table (erro?)

Galera, boa noite.

Estou com um problema pra criar uma table.

Na verdade, acontece que eu gostaria que tivesse uma última linha que mostrasse a palavra "TOTAL" seguida de um valor qualquer. Tentei simular isso de uma forma estática, porém meu exemplo fica ruim. Essa última linha não fica com a marcação desenhada corretamente e não sei o que fazer pra resolver este problema.

Utilizei a tag "tfoot" pra fazer a mesma, pois acredito que é a melhor opção para semântica (acredito eu). Entretanto, caso encontrem outra maneira de se obter o mesmo resultado, seria de muita utilidade também.

Segue link das imagens pra melhor entendimento do problema, bem como o código:

Imagem de como está atualmente: http://imgur.com/a/kYEF3

Imagem de como deveria ser, via Excel: http://imgur.com/a/IoNll

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>

<body>
  <header>
      <nav class="navbar navbar-default">
          <div class="container">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Logo de Maluco</a>
              </div>     
              <div class="collapse navbar-collapse" id="collapse-navbar">
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Algo 1</a></li>
                    <li><a href="#">Algo 2</a></li>
                    <li><a href="#">Algo 3</a></li>
                    <li><a href="#">Eita Porra</a></li>
                    <li><a href="#">Loucura 999</a></li>
                    <li><a href="#">What</a></li>
                    <li><a href="#">Admin</a></li>
                    <li><a href="#">Sair do Sistema</a></li>
                    <li><a href="#">Voltar</a></li>
                  </ul>
              </div>
          </div>
      </nav>
      <div class="container">
        <div class="row">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="table-responsive">
                    <table class="table table-hover text-center">
                        <thead>
                            <th class="text-center">AP</th>
                            <th class="text-center">CNES</th>
                            <th class="text-center">Nome da Unidade</th>
                            <th class="text-center">Data Atualização</th>
                            <th class="text-center">Data Inauguração</th>
                            <th class="text-center">Equipes</th>
                            <th class="text-center">#</th>
                            <th class="text-center">#</th>
                            <th class="text-center">M</th>
                        </thead>
                        <tfoot>
                            <tr>
                                <th class="text-center">TOTAL</th>
                                <th class="text-center">1286</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>
                            <tr>
                                <td>1.0</td>
                                <td>7268580</td>
                                <td>SMS CAMARA DE RESOLUÇÃO DE LITÍGIOS DE SAÚDE AP 1.0</td>
                                <td>28/08/2014</td>
                                <td>-</td>
                                <td>0</td>
                                <td>#</td>
                                <td>#</td>
                                <td>M</td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>   
  </header>
  </body>
  </html>
6 respostas

Ramon, boa noite

isso já deve funcionar..

<tfoot>
    <tr>
        <th colspan="8" style="text-align: right;" class="text-center">TOTAL</th>
        <th class="text-center">1286</th>
    </tr>
</tfoot>
solução!

Boa noite Ramon, altere o tfoot para:

<tfoot>
    <tr>
        <th colspan="4"></th>
        <th class="text-center">TOTAL</th>
        <th class="text-center">1286</th>
        <th colspan="3"></th>
    </tr>
</tfoot>

Luis, tua solução não era bem o que eu procurava, mas pode ser útil caso eu não for manter esse estilo que eu queira no momento.

Alex, essa ai caiu como uma luva! Ficou exatamente do jeito. Porém, segue uma dúvida minha:

Não é deselegante ou incorreto utilizar esses elementos vazios pra poder cumprir o objetivo (ths com colspan)? Quero dizer, não haveria uma outra maneira de se cumprir o mesmo objetivo? Via bootstrap mesmo ou seiláoq.

De qualquer forma, já agradeço, obrigado caras!

Ramon, não é deselegante não.

você vai ter que utilizar isso para ficar do jeito que você precisa, o bootstrap só tem o estilo da tabela em si, mais nada para juntar linhas ou colunas.

obs: me confundi na img e acabei fazendo errado o exemplo.

Concordo com o Luis, não é deselegante e o método colspan é para isso mesmo, mesclar colunas.

Hmmm, entendi.

Muito obrigado caras, de verdade. Me deram uma moral e me esclareceram ainda por cima. Valeu!