How to ensure that the elements of the block are on the same line in the table?

Question

I have a <table> where the last column contains some kind of <button> s action. Other columns contain paragraphs of text. Since they contain text, their width expands as much as possible, and then the text is wrapped. This is normal for all columns except the last. I do not want the buttons in the action column to be wrapped; I want them to be on the same line. How to do it?

See this jsfiddle for a demonstration of the problem.

Answer 1

It is so simple:

 .actions { /* EDIT: float is not necessary in table cells – float: left; */ white-space: nowrap; } 

Demo (forked violin)

http://jsfiddle.net/insertusernamehere/XUda2/

Answer 2

The key is to use nowrap .

 <table> <tr> <td>Text</td> <td>Text</td> <td>Text</td> <td nowrap="nowrap"><button>Button</button></td> </tr> </table>