How to avoid text wrapping in td with text and right float

Question

http://jsfiddle.net/a2kvU/

<table class="table table-bordered table-condensed"> <tbody> <tr><td class="nowrap">abc def ghi jkl<span class="label label-info pull-right">123</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr> <tr><td class="nowrap">abc def ghi<span class="label label-info pull-right">456</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr> <tr><td class="nowrap">abc def<span class="label label-info pull-right">789</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr> <tr><td class="nowrap">abc<span class="label label-info pull-right">1000</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr> </tbody> </table> .nowrap { white-space: nowrap; } 

not larger than the screen size, it looks something like this:

with small screen sizes (and with large enough real text) it looks like

Notice the wrap in the left column. How can I make the left column not turn around?

Answer 1

You need to define the min-width property for your nowrap class, for example:

 td.nowrap { min-width: 129px; } 

The value 129px was calculated for your sample script.

Since the contents inside the table may change, the best way (maybe not the most "clean") to do this is to calculate the required minimum width td when loading the page and set the value to min-width.

In your example, Bootstrap makes the first width of 300 pixels, so it's pretty hard to compute. I will try to get a jQuery example, ready for you later today.

Answer 2

Try moving the range text to the second column (setting the styles so that it still appears as a single column, and the title for both columns). The first column then pulls to the left, and the second pulls to the right, and no packaging can happen if both have a text-nowrap class (or equivalent).

 <td class="nowrap norightborder">abc def ghi jkl</td><td class="nowrap noleftborder"><span class="label label-info pull-right">123</span></td>