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?

Answer 1

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>

Answer 2

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.