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

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>

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.

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

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 ...