CSS: how do I force contents in a table cell to stay on one line when browser size reduced

Tags: html,css

Problem :

I have a table that has a column containing two buttons. When the browser is reduced in size, the column (i.e. the td) containing these two buttons breaks. Does anyone know how I could prevent this from happening using CSS? In other words, force the two buttons to stay next to each other?

I've tried the following and both failed:

1. putting a width in pixels on the td
2. white-space: nowrap

Here is the html:

<table>      
   <tr>
      <!-- several other tds before this one -->
      <td>
         <a class="sg-icon sg-i-ok"></a>
         <button class="k-button sg-grid-filter-clear-button" ng-click="clearFilterValues()">x</button>
     </td>
   </tr>
</table>

And here is the styling from Chrome:

---

Solution :

Wrap the <a> and the <button> in a containing <div> and give it a fixed width:

DEMO

<td>
     <div class="fixed_width">
         <a class="sg-icon sg-i-ok"><img src="http://placehold.it/30x30"></a>
         <button class="k-button sg-grid-filter-clear-button" ng-click="clearFilterValues()">x</button>
     </div>
 </td>

---

.fixed_width {
    width: 80px;
}