CODEWITHSUNDEEP
htmlcss
Tone
Tone

Reputation: 990

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

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

Upvotes: 0

Views: 931

Answers (2)

Turnip
Turnip

Reputation: 36642

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

Upvotes: 1

Rachel9494
Rachel9494

Reputation: 824

I think the browser doesn't know what to do here because there's not enough space to fit everything. Logically, you'd have to either make the numbers progessively smaller or include less numbers the smaller the screensize is (or make the buttons themselves progressively smaller which is not a good option).

Upvotes: 0

Related Questions