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

Question

I have the following code :
<td>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-pencil-square-o"></i>
</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>
</button>
</td>
They appear on 2 different lines.
How can I make them appear next to each other on the same line ?
I tried a few things with float and display but without success.

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

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

Answer 5

Please see how to use <table> tag inside in <td> and get all button in line.
<table>
<td>
<table>
<tr>
<td>
<button class="btn btn-primary btn-xs">Add</button>
</td>
<td>
<button class="btn btn-primary btn-xs">Edit</button>
</td>
<td>
<button class="btn btn-primary btn-xs">View</button>
</td>
</tr>
</table>
</td>
</table>