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

Asked

Viewed 15,388 times

21

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 screen size in use and, based on this, hide certain columns from each table.

css ruby-on-rails twitter-bootstrap ruby responsive-layout

  • since you are using Ruby, have you considered using the Zurb Foundation instead of Bootstrap? After all, Zurb uses SASS and not LESS.

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

11

Simply use the component .table-responsive that provides the Bootstrap:

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

You can find more information on project documentation.

It’s not necessary hack the CSS or use other components other than the table as suggested.

7

With Twitter Bootstrap everything gets easier, you just need to create the right HTML 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 very well: Bootstrap

  • 1

    it would be interesting to put examples of code, not only quote an external source :)

  • I did not put because I found it very simple, anyway... xD

  • Thanks for the tip. Let me see if I understand, should I include the respective class within the <th> and <td> you want to hide? For example, <th class ="Hidden-phone"></th><td class="Hidden-phone"></td> - right?

  • No, with bootstrap you no longer use table, td, th... the structure will be as if you were actually setting up a table, but only with Divs, already these classes, "Hidden-phone" for example, serve yes to determine on which media you want that content to be viewed...I do not know which version of the bootstrap you are using, but there on their site have everything explained in PT! http://getbootstrap.com/

  • I tried it, and it worked. Thank you very much. I accepted Toni’s question because it is the one that most quickly teaches how to deal with the problem. If my judgment is wrong, please correct me.

  • You who sends boss...

  • Just note the following, do not duplicate content in your application, that code already exists in bootstrap css, do not include it again!

  • I was looking at the reference material for tables on the http://alexanmtz.github.io/bootstrap/base-css.html#Tables page and in the example they use <table> with <tr> and <td>

  • It is possible in both ways, but I believe it is much more practical using only Divs...ai goes from each one...Besides being more practical, the code of the table is with a much nicer look and easier maintenance...

  • @Kennyrafael (about the duplicate content): in this case, if I just want to hide 1 or 2 columns from a table and keep track of what will be hidden and what will remain in view, it would be more feasible to add the respective class, wouldn’t it? By the way, thanks for the tips, I will dedicate more time to Bootstrap Cds.

  • Yes, of course, I don’t know what is the complexity of your project, but there are several ways to do this, you can save the information of which columns should have which classes to hide, and at the time of generating this table you print the value saved in the database, Hiding the way you want that column, that’s one way, whether it’s the best or not, it’s going to depend a lot on how your project is being done, there are other ways too...

Show 6 more comments

4

Here are some interesting options for responsive tables: http://elvery.net/demo/responsive-tables/

And I don’t know either which version of Bootstrap you’re using, but the 3 has some changes in the way you use the grid...

  • Vinicius Diascanio very good, these examples are really useful!

Browser other questions tagged css ruby-on-rails twitter-bootstrap ruby responsive-layout

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