Resize <td> using bootstrap

Asked

Viewed 12,235 times

4

Have how I create a table with Bootstrap and fix the size of each <td>? I would like to be able to make the cell size of a table more flexible with Bootstrap, it is possible?

jquery css twitter-bootstrap

1 answer

4


For tables you can use the same pattern as the division of div.

<tr class='row'>
    <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">col 1</td>
    <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4">col 2</td>
    <td class="col-xs-6 col-sm-6 col-md-6 col-lg-6">col 3</td>
</tr>

Behold Grid Options to better understand the division of grids

Jsfiddle

  • My difficulty is to understand the Sm, Md, Xs and lg. I still can’t understand these guys.

  • @pnet veja este link http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-14-grid-responsive-do-bootstrap", maybe it helps you understand the grid division, look up the page for: 11.14 - Bootstrap responsive grid

  • 3

    @pnet, Sm, Md, Xs and lg has to do with user screen size, where briefly Sm = small screen, Md = media, Xs = super small, lg = large (see here for more details: http://getbootstrap.com/css/#grid-options ). Using these classes you control how the content appears on each screen size. Remembering that 100% of the width of a Row is 12 columns, this example <div class="col-xs-12 col-md-6"> </div> -> will occupy the 12 columns [100%] on a small screen (Xs) and 6 columns [50%] on a medium screen (Md).

Browser other questions tagged jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.