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

Question:

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

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

Answer:

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 rules above, you can create special CSSs for each device, if you just want to hide or show objects you can use these classes, and everything is 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>
Scroll to Top