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..

    In CSS, how can I give two styles to same div according to its level on a
      list?

    How to override bootstrap styles?

    how to optimize Less CSS? how to generate 1 minified version of all less files? I am also using modifyVars

    how to prevent transformation of text inherited from a skewed parent

    How to apply CSS to td of particular table using Classname? [duplicate]

    Content shows up when clicked on the link

    How to prevent mobile keyboard from rising footer over the text fields?

    How to align / valign css-rotated span within its parent div

    How a checkbox will trigger another input element in html via javascript?

    How can I create an icon and text in same div like table format

    How do I wrap a overflowed span in fixed div

    how to set the default css validation scheme in visual studio 2010?

    how to make the text in a div to not overflow its width

    How i can create dynaminc ordered list items with pure css

    How to reduce amount of space between lines of text

    How to expand input field to the right in a header bar

    How to edit Skype contact me button CSS?

    How to create this material design background (see image below) with CSS?

    How to set bold only to first level list elements? [duplicate]

    How to create button backgrounds with css

    CSS how to apply :first-child and :last-child

    How to force inline-blocked divs to same height

    How to assign a css class or id to smileys?

    How to flip which side a progress bar begins at with CSS

    How to set image height 90 % of whole page height (not viewport)

    What is cufon and canvas and how to overwrite them

    How can I automatically highlight a specific character in link text using JQuery + CSS?

    How to make google maps fit the mobile device screen

    How can I specify distance between list items?

    How to free a paragraph from its CSS style?