How to make a table responsive using (Twitter) Bootstrap?

20

I'm working on a web application using Ruby On Rails 4 and much of the interface consists of tables.

I would like you to suggest a way to detect the size of the screen in use and, based on this, hide certain columns from each table.

    
asked by Wilson Canda 11.12.2013 в 17:16
source

4 answers

14

You can hide any object by class or id using the following code:

@media (max-width:768px) {
    #id_a_ocultar_em_tablet {
        display: none;
    }

    .classe_a_ocultar_em_tablet {
        display: none;
    }
}

@media (max-width:480px) {
    #id_a_ocultar_em_smartphone {
        display: none;
    }

    .classe_a_ocultar_em_smartphone {
        display: none;
    }
}

With the above rules, you can create special CSSs for each device, if you just want to hide or show objects you can use these classes, and it's all simpler:

.visible-phone
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop

For example:

<div class="hidden-phone">Este texto nao aparece num smartphone</div>
<div class="visible-phone">Este texto SÓ aparece num smartphone</div>
    
answered by 11.12.2013 / 17:24
source
11

Simply use the .table-responsive component provided by Bootstrap:

<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

You can find more information at project documentation .

It is not necessary to hack the CSS or use other different components of the table as suggested.

    
answered by 03.02.2014 в 18:26
7

With Twitter Bootstrap everything gets easier, just create the HTML correctly and include the right classes in your tags, since it already has all the CSS created for you to use the responsive design.

This is a basic HTML of a responsive table:

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Here's why: Bootstrap

    
answered by 11.12.2013 в 17:21
4

Here are some interesting options for responsive tables: link

And I do not know which version of Bootstrap you're using, but 3 has some changes in how to use the grid ...

    
answered by 11.12.2013 в 18:58