How to make a table responsive using (Twitter) Bootstrap?
I am working on a web application using Ruby On Rails 4 and much of the interface consists of tables.
I would like them to suggest a way to detect the size of the screen in use and, based on that, hide certain columns from each table.
4 answers
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 everything becomes 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 that provides Bootstrap:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
You can find more information in the project documentation.
It is not necessary to hack CSS or use other components other than the table as suggested.
With Twitter Bootstrap everything gets easier, you 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 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 explains straight: Bootstrap
Here are some interesting options for Responsive tables: http://elvery.net/demo/responsive-tables /
And I also don't know which version of Bootstrap you're using, but 3 has some changes to how to use grid...