htmlcssbuttonhtml-table

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


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.


Solution

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