Align button at the end of table

Asked

Viewed 1,188 times

1

I have this 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>

At the end of it there is a value button = "+"; How do I get this button to be aligned at the end of the table on the right.

html css twitter-bootstrap

  • Young semantically the syntax of your table is quite wrong... you should not put div or form encompassing several TDs when so, place the Dive or the form inside the TD. I tested your code here on Bootstrap 3, and apparently btn is getting to the right of the table normally...

  • @hugocsl, not staying. He’s getting right, outside the table area. What I would like to do is put it to the board, but right below the dividing line of the table.

  • See that I have a caption Field Type List of Fields, only aligned to the left. I would like to place the button at the other end, but in the same direction as the caption, and under the table.

  • I think I got it, you want it in the same "line" where it is Field Type List of Fields at the end of this line is btn with + is that it? You are using Bootstrap 3 or 4?

  • That’s right, @hugocsl. We’re using 4

3 answers

1

You can use that

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

  • Anderssonos, good morning . As I said, at the end of the table.

1


Without getting into the merits of semantics that is wrong (as mentioned), put the div within the caption and use the class float-right:

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

Behold:

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

0

If you want to align according to the size of the table, you can use the tfoot of the table and put the button there, with right alignment on td take the example:

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>

  • The problem is that the button is inside the table. I’d like to align with caption. I’m testing some CSS here to see if I can.

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.