Make 2 buttons inside a table cell be next to each other

What you need is just css display inline code, which can be use to format your button form { display: inline; }

this displays an element as an inline element like span


Did you tried display: inline-block;? However that seems unnecessary because two buttons in the same table cell will appear on the same line.

table,
td,
tr {
  border: 1px solid black;
  border-collapse: collapse;
}
<table>
  <tr>
    <td>
      <button>Button1</button>
      <button>Button2</button>
    </td>
  </tr>
</table>

If I add that code in a snippet the buttons are next to each other, so it's hard to reproduce:

<table>
  <tr>
    <td>
      <button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
        <i class="fa fa-pencil-square-o"></i>Button1
      </button>
      <button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
        <i class="fa fa-step-backward"></i>
        <i class="fa fa-step-forward"></i>Button2
      </button>
    </td>
  </tr>
</table>

The buttons are already displayed as inline-block. Maybe the table isn't wide enough; if so, You could try <td style='white-space: nowrap'>.


If you're using Bootstrap, try using classes like "pull-left". This will float both of the buttons left and bring them inline. Also check to be sure nothing is overriding the current display attribute.

<div class="pull-left">...</div>
<div class="pull-right">...</div>