Bootstrap 3 | How to leave the last column always more to the right?

Asked

Viewed 843 times

1

I need to leave the last column of my table (the one that has the glyphs action) always to the right:

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

You can do it?

twitter-bootstrap bootstrap-3 table table
  • 1

    try adding the class pull-right

  • I placed the pull-right in the td but the table had a space without the edges.

  • I’m on mobile, and not to put an example. Mar you have tried to add a div align=center in the content.

  • Or a td align right?

1 answer

1


As stated in the commentary, just put a pull-right, but not in the column, but in the div which will have the button bar, like this example:

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

  • I had to add a pull-right in div with the btn-group and add the classes pull-right and text-right in the table header. I thought there was some other way to do this. Anyway, thanks.

  • @chorajunior changed the alignment form in the header as well, using a span, then we align only him. In div styled btn-group is not necessary in this example, only in the div external. In this case and with bootstrap I know no other way.

Browser other questions tagged twitter-bootstrap bootstrap-3 table table

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