tesicg tesicg - 3 months ago 17
HTML Question

How to put buttons next to each other?

I have a table and put 2 buttons in the last column, but they are one below each other. It looks as following:

enter image description here

The HTML code look as following:

<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td><img src="{{ item.Avatar }}" /></td>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>


I've tried a lot of settings, but it doesn't help.

How to put them next to each other?

UPDATE:

enter image description here

Answer

This is an easy problem to fix.

As you used tables in your structure, you can use tables in the last column.

Inside that last column td, add a table. The table body should look like this.

<div class="table-responsive">
  <table class="table table-bordered table-hover" style="width: 80%;">
    <thead>
      <tr>
        <th>ID</th>
        <th>Gender</th>
        <th>FirstName</th>
        <th>LastName</th>
        <th>EMail</th>
        <th>CompanyName</th>
        <th>JobTitle</th>
        <th>Phone</th>
        <th>Avatar</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in contacts">
        <td>{{item.Id}}</td>
        <td>{{item.Gender}}</td>
        <td>{{item.FirstName}}</td>
        <td>{{item.LastName}}</td>
        <td>{{item.EMail}}</td>
        <td>{{item.CompanyName}}</td>
        <td>{{item.JobTitle}}</td>
        <td>{{item.Phone}}</td>
        <td>
          <img src="{{ item.Avatar }}" />
        </td>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
                </td>
                <td>
                  <button ng-click="delete($index)" class="btn btn-primary">Delete</button>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>

Comments