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:

enter image description here

enter image description here



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;
}

    CSS Howto..

    How to position the GWT dialog to the bottom right corner of the browser?

    How do I do the exact opposite [closed]

    How to reference a Div after each h3

    How can change the style of
      tag in CSS

    In firefox, how can I change an existing CSS rule

    How to make triangle shape in before a div in pure css?

    How to limit width of

    -

    tag by length of content

    How can I indent all text in a paragraph except the first line?

    how to print 60 degree rotated watermark in HTML CSS

    How to set column width for DataTables

    Understanding how CSS clear:both is supposed to work

    How to design a cross client / browser compatible email?

    How to make a CSS menu from raw HTML code

    How to quickly create complex web controls for web development? [closed]

    How to fade gradient, image or texture as background?

    how to create the scrolling Menu in css?

    How can I change the colour of individual squares on this grid…?

    How to add next / previous buttons to Surface tablet touch-slideshow?

    How can i make this border to the end?CSS

    How to create color custom scrollbar in pure css? [closed]

    How to remove the border around the image?

    How to Align a Link HTML/CSS

    How to set alternate row color for a given attached diagram

    How to apply CSS to second word in a string?

    How to horizontally align a list of contacts?

    css rules multi class, how to match two out of many

    How can I add a consistent left margin to a checkbox label?

    How could I add two separate text styles to a button in a form in CSS?

    How to make my phone number bold using css [closed]

    How to expand CSS column to available space?