1

Tenho essa table

<div class="container">
    <div class="row">
        <div class="col-md-12">
        <table class="table table-striped table-bordered">
         <caption>Lista de Tipo de Campos</caption>
            <thead class="thead-dark">
                <tr>
                    <th>Nome</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let typefield of dataSource">
                    <div *ngIf="typefield.edit!=true">
                        <td class="col-md-10">{{ typefield.name }}</td>
                        <td class="col-md-1">
                                <fa *ngIf="checkEdit()" name="pencil" (click)="initEditTypeField(typefield)"></fa>
                            </td>
                            <td class="col-md-1">
                                <fa *ngIf="checkEdit()" name="times" (click)="onDelete(typefield)"></fa>
                            </td>
                    </div>
                    <form [formGroup]="createForm" *ngIf="typefield.edit === true">
                            <td class="col-md-6"> {{ typefield.typefieldId}}<input formControlName="id" type="hidden" class="col-md-1"></td>
                            <td> <input formControlName="name" type="text"></td>
                            <td class="col-md-1">
                                <fa name="save" (click)="onUpdate()"></fa>
                            </td>
                            <td class="col-md-1">
                                <fa name="ban" (click)="typefield.edit = null; initDefaultForm();"></fa>
                            </td>
                    </form>
                </tr>
            </tbody>

        </table>
        <div>
            <input type="button" class="btn btn-success pull-right" value="+">
        </div>
      </div>
</div>
</div>

Ao final dela tem um botão de value = "+"; Como eu faço para que esse botão esteja alinhado ao final da table à direita.

5
  • Jovem semanticamente a sintax da sua tabela está bem errada... vc não deve colocar div ou form englobando várias TDs quando for assim, coloque a dive ou o form dentro da TD. Eu testei seu código aqui no Bootstrap 3, e aparentemente o btn está ficando a direita da tabela normalmente...
    – hugocsl
    Commented 29/07/2018 às 14:28
  • @hugocsl, não tá ficando. Ele tá ficando bem à direita, fora da área da table. O que gostaria é de colocar ele à diretita, mas bem em baixo da linha divisória da table.
    – pnet
    Commented 29/07/2018 às 14:50
  • Veja que eu tenho um caption Lista de Tipo de Campos, só que alinhado à esquerda. Gostaria de colocar o botão na outra extremidade, mas na mesma direção do caption, e embaixo da table.
    – pnet
    Commented 29/07/2018 às 14:56
  • Acho que entendi, vc quer que na mesma "linha" onde está Lista de Tipo de Campos no final dessa linha fique o btn com + é isso? Vc está usando Bootstrap 3 ou 4?
    – hugocsl
    Commented 29/07/2018 às 14:59
  • Isso mesmo, @hugocsl. Estamos usando o 4
    – pnet
    Commented 29/07/2018 às 15:00

3 Respostas 3

1

Sem entrar nos méritos da semântica que está errada (como foi citado), coloque a div dentro do caption e use a classe float-right:

<caption>
   Lista de Tipo de Campos
   <div class="float-right">
      <input type="button" class="btn btn-success pull-right" value="+">
   </div>
</caption>

Veja:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">
   <div class="row">
      <div class="col-md-12">
         <table class="table table-striped table-bordered">
            <caption>
               Lista de Tipo de Campos
               <div class="float-right">
                  <input type="button" class="btn btn-success pull-right" value="+">
               </div>
            </caption>
            <thead class="thead-dark">
               <tr>
                  <th>Nome</th>
               </tr>
            </thead>
            <tbody>
               <tr *ngFor="let typefield of dataSource">
                  <div *ngIf="typefield.edit!=true">
                     <td class="col-md-10">{{ typefield.name }}</td>
                     <td class="col-md-1">
                        <fa *ngIf="checkEdit()" name="pencil" (click)="initEditTypeField(typefield)"></fa>
                     </td>
                     <td class="col-md-1">
                        <fa *ngIf="checkEdit()" name="times" (click)="onDelete(typefield)"></fa>
                     </td>
                  </div>
                  <form [formGroup]="createForm" *ngIf="typefield.edit === true">
                     <td class="col-md-6"> {{ typefield.typefieldId}}<input formControlName="id" type="hidden" class="col-md-1"></td>
                     <td> <input formControlName="name" type="text"></td>
                     <td class="col-md-1">
                        <fa name="save" (click)="onUpdate()"></fa>
                     </td>
                     <td class="col-md-1">
                        <fa name="ban" (click)="typefield.edit = null; initDefaultForm();"></fa>
                     </td>
                  </form>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

1

Pode usar isso

<div class="container">
    <div class="row">
        <div class="col-md-12">
        <table class="table table-striped table-bordered" style="float:left">
         <caption>Lista de Tipo de Campos</caption>
            <thead class="thead-dark">
                <tr>
                    <th>Nome</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let typefield of dataSource">
                    <div *ngIf="typefield.edit!=true">
                        <td class="col-md-10">{{ typefield.name }}</td>
                        <td class="col-md-1">
                                <fa *ngIf="checkEdit()" name="pencil" (click)="initEditTypeField(typefield)"></fa>
                            </td>
                            <td class="col-md-1">
                                <fa *ngIf="checkEdit()" name="times" (click)="onDelete(typefield)"></fa>
                            </td>
                    </div>
                    <form [formGroup]="createForm" *ngIf="typefield.edit === true">
                            <td class="col-md-6"> {{ typefield.typefieldId}}<input formControlName="id" type="hidden" class="col-md-1"></td>
                            <td> <input formControlName="name" type="text"></td>
                            <td class="col-md-1">
                                <fa name="save" (click)="onUpdate()"></fa>
                            </td>
                            <td class="col-md-1">
                                <fa name="ban" (click)="typefield.edit = null; initDefaultForm();"></fa>
                            </td>
												
                    </form>
                </tr>
            </tbody>

        </table>
		<div style="float: right; width:  100%;">
		<button style="float: right;">+</button>
		</div>
        <div>

1
  • AnderssonOS, bom dia . Como falei, no final da table.
    – pnet
    Commented 29/07/2018 às 14:37
0

Se quer alinhar conforme o tamanho da tabela, você pode usar o tfoot da tabela e colocar o botão lá, com alinhamento à direita na td veja o exemplo:

table {
  border-collapse: collapse;
  border: 1px solid black;
  width: 100px;
}

table td {
  border: 1px solid black;
  padding: 5px
}
table tfoot td {
  text-align: right;
}
<table>
  <tbody>
    <tr>
      <td>um</td>
      <td>dois</td>
      <td>três</td>
    </tr>
    
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        <input type="button" class="btn btn-success pull-right" value="+">
      </td>
    </tr>
  </tfoot>
</table>

1
  • O problema é que fica dentro da table o botão. Gostaria de ficar alinhado com o caption. Estou testando uns CSS aqui pra ver se consigo.
    – pnet
    Commented 29/07/2018 às 15:52

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 .