Odtnhj

Using Bootstrap 4, I have a table with a couple of columns. In tha last column (on the right) I have some buttons that I want to show up next to each other on large screen. I can't get it to work. I tried setting the class of the td elemnt to d-inline to make the content appear inline, but it does not work. I also tried creating a div with the css set to show it inline, but again it did not work. How to fix this so all content of the cell shows inline on a large screen?

My HTML

<div class="container">
<table class="table">
<tr>
 <td>
 some long text here, well at least long enough to show the effect of the buttons next being next to each other anymore, even on a large display. 
 </td>
 <td>
 something else here
 </td>
 <td>
 <button class="btn btn-sm">
 some button
 </button>
 <button class="btn btn-sm">
 some button
 </button>
 <button class="btn btn-sm">
 some button
 </button>
 </td>
</tr>
</table>
</div>

Or as a JSFiddle.

You can put a style="white-space:nowrap" style on the table column, which should force things not to wrap inside the cell.

<div class="container">
<table class="table">
<tr>
 <td>
 some long text here, well at least long enough to show the effect of the buttons next being next to each other anymore, even on a large display. 
 </td>
 <td>
 something else here
 </td>
 <td style="white-space:nowrap">
 <button class="btn btn-sm">
 some button
 </button>
 <button class="btn btn-sm">
 some button
 </button>
 <button class="btn btn-sm">
 some button
 </button>
 </td>
</tr>
</table>
</div>

http://jsfiddle.net/qgv9e0jw/

Alternatively, since you're already using Bootstrap, you can also use their provided text-nowrap class, which does essentially the same thing as above.

<div class="container">
<table class="table">
<tr>
 <td>
 some long text here, well at least long enough to show the effect of the buttons next being next to each other anymore, even on a large display. 
 </td>
 <td>
 something else here
 </td>
 <td class="text-nowrap">
 <button class="btn btn-sm">
 some button
 </button>
 <button class="btn btn-sm">
 some button
 </button>
 <button class="btn btn-sm">
 some button
 </button>
 </td>
</tr>
</table>
</div>

http://jsfiddle.net/ympe2g7w/