Bumi Bumi - 1 month ago 14
CSS Question

Bootstrap grid inside a TD

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

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