How to ensure block elements will be on same line in a table?

Question

I have a <table> where the last column contains some action <button>s. The other columns contain paragraphs of text. Because they contain text, their width extends as much as possible and then the text wraps. That is fine for all columns but the last. I don't want the buttons in the actions column to wrap; I want them on a single line. How to can I do that?

See this jsfiddle for a demo the the problem.

Answer 1

It's as simple as this:

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

Demo (forked fiddle)

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>