1

Preciso deixar a última coluna da minha tabela (a que tem os glyphs de ação) sempre mais à direita:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <td class="col-md-1"></td>
      <td>Name</td>
      <td>Age</td>
      <td>E-mail</td>
      <td>Actions</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>John Doe</td>
      <td>50</td>
      <td>[email protected]</td>
      <td>
        <div role="toolbar" class="btn-toolbar">
          <div role="group" class="btn-group">
            <button type="button" alt="Delete record" class="btn btn-default"><span class="glyphicon glyphicon-remove-sign"></span>
            </button>
          </div>
          <div role="group" class="btn-group">
            <button type="button" alt="Edit record" class="btn btn-default"><span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" alt="Move record up" class="btn btn-default"><span class="glyphicon glyphicon-arrow-up"></span>
            </button>
            <button type="button" alt="Move record down" class="btn btn-default"><span class="glyphicon glyphicon-arrow-down"></span>
            </button>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Tem como fazer isso?

4
  • 1
    tente adicionar a classe pull-right
    – RFL
    Commented 29/08/2015 às 19:55
  • Coloiquei o pull-right no td mas a tabela ficou com um espaço sem as bordas.
    – llanfair
    Commented 29/08/2015 às 20:24
  • Estou no celular, e não da para colocar um exemplo. Mar você já tentou adicionar uma div align=center no conteúdo.
    – Randrade
    Commented 29/08/2015 às 21:08
  • Ou um td align right?
    – Randrade
    Commented 29/08/2015 às 21:09

1 Resposta 1

1

Como dito nos comentário, basta colocar um pull-right, mas não na coluna, e sim na div que terá a barra de botões, como este exemplo:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-hover">
  <thead>
    <tr>
      <td class="col-md-1"></td>
      <td>Name</td>
      <td>Age</td>
      <td>E-mail</td>
      <td><span class="pull-right">Actions</span></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>John Doe</td>
      <td>50</td>
      <td>[email protected]</td>
      <td>
        <div role="toolbar" class="btn-toolbar pull-right">
          <div role="group" class="btn-group">
            <button type="button" alt="Delete record" class="btn btn-default"><span class="glyphicon glyphicon-remove-sign"></span>
            </button>
          </div>
          <div role="group" class="btn-group">
            <button type="button" alt="Edit record" class="btn btn-default"><span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" alt="Move record up" class="btn btn-default"><span class="glyphicon glyphicon-arrow-up"></span>
            </button>
            <button type="button" alt="Move record down" class="btn btn-default"><span class="glyphicon glyphicon-arrow-down"></span>
            </button>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

2
  • Tive que adicionar um pull-right na div com o btn-group e adicionar as classes pull-right e text-right no cabeçalho da tabela. Pensei que tivesse alguma outra maneira de fazer isso. De qualquer forma, obrigado.
    – llanfair
    Commented 29/08/2015 às 22:52
  • @chorajunior alterei a forma de alinhamento no cabeçalho também, utilizando um span, daí alinhamos apenas ele. Nas div com estilos btn-group não é necessário neste exemplo, apenas na div externa. Neste caso e com bootstrap não conheço outra forma. Commented 29/08/2015 às 23:02

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 .