Clever Geek Handbook

Bootstrap mesh inside TD

I have a table with a column that contains grid-like data in one TD:

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

Instead of specifying the table inside the TD, I tried to use Bootstrap 3's grid classes. This worked great when my table was small, but adding a grid to a large table (with more columns) behaves differently. When there are too many columns in the table, my two-column table inside a TD wraps around and looks like a single column grid:

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

The code I am using is similar to this, although more columns are required to identify 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 keep my 2 column grid in my TD using Bootstrap or otherwise?

+3


source to share


4 answers


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

+3


source


Change col-sm-...

to col-xs-...

.



But you should also consider the proposal of George Cummins.

0


source


As George said, I would only use bootstrap classes,

use container

(or custom hyphenation) instead table

,

rows

for tr

,

and finally you will split your rows in columns ( col-sm-2

- col-sm-10

) instead of td

(or th

)

0


source


This worked for me:

td .row { margin-right: 0 !important; }
0


source






More articles:


All Articles