How to avoid text wrapping in a td with text and a right-floated label

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

at most screen sizes, this looks something like

at small screen sizes (and with sufficiently larger real text), this looks like

note the wrapping on the left column. how can I force the left column to not wrap?

Washstand

In case your real goal is indeed keeping your floating element in upper right corner, you may simply remove your nowrap class and declare your floating element prior to text. See jsfiddle.net/g8y5eqw2 – Floatation

See #26389093 – Goldplate

Answer 1

You need to define a min-width property for your with the class nowrap, like so:

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

The 129px value was calculated for your fiddle example.

Since content inside the table might change, the best way (maybe not the "cleanest" one though) to do this is calculating the required min width of the td at page load and set the min-width value then.

In your example Bootstrap makes the first 's width at 300px, so it's quite complex to calculate. I will try to get a jQuery example ready for you later today.

Moniz

Here's a fiddle doing the trick dynamically with jQuery: jsfiddle.net/a2kvU/15 – Moniz

Answer 2

Try moving the span text into a second column (adjusting your styles so that it still appears as one column, and the header to span both columns). The first column then pulls left while the second pulls right, and no wrapping can occur as long as both have the text-nowrap class (or an equivalent).

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

Severally