Bootstrap grid inside a TD

Question

I have a table with a column that holds grid-like data in a single TD:

1   $1,234.56
2   $2,000.00
11 $8,000.00

Rather than specifying a table inside of the TD, I've attempted to use the Bootstrap 3 grid classes. This worked great when my table was small, but adding the grid to a larger table (with more columns) is behaving differently. When the table has too many columns, my two column grid within the TD is wrapping and looks like a one column grid like so:

1
$1,234.56
2
$2,000.00
11
$8,000.00

The code I'm using is similar to this, though needs more columns to witness the problem. Full JSFiddle example here.

<table class="table">
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header for 2 column grid</th>
    </tr>
<tbody>
    <tr>
        <td>
            Some content
        </td>
        <td>
            <div class="row">
                <div class="col-sm-2">1</div>
                <div class="col-sm-10">1,234.56</div>
            </div>
            <div class="row">
                <div class="col-sm-2">13</div>
                <div class="col-sm-10">8,000.00</div>
            </div>
        </td>
    </tr>
</tbody>
</table>

Does anyone have a better suggestion to preserve my two column grid in my TD, using Bootstrap or otherwise?

Answer 1

change your HTML to

    <td style="white-space:nowrap">
        <div class="row">
            <div class="col-xs-2">1</div>
            <div class="col-xs-10">1,000.00</div>
        </div>
        <div class="row">
            <div class="col-xs-2">2</div>
            <div class="col-xs-10">1,582.99</div>
        </div>
    </td>

and add this line to your CSS:

.row .col-xs-2, .row .col-xs-10{display:inline-block; float: none}

see fiddle here