How to Handle Tables in Responsive Design

[safeer008]

Can anybody tell me that how we can handle the tables in a responsive website design. If you try to decrease the font size it will be harder for the mobile users. If you don't decrease the font size then the data will be mixed and so on. Give me CSS code.

[David_50]

Design a generic table so users can hide and rearrange columns, which sorts left to right, reverse on second click of any column. Design it to have filters so the row count under view can be reduced. Design it to freeze panes so they can still access col/row headers when down table or right. Design it to go full screen with hidden controls. us a decent sized font. Verdana was the winner in an IEEE published productivity test, is more readable at smaller sizes. Mobile users can shrink and expand screens up to some limit, so make sure that works right, not too limited.

[safeer008]

Can you give me any code example?

[mattster]

You can look at this article for some ideas: http://exisweb.net/responsive-table-plugins-and-patterns

You can use CSS3 'breakpoints' to do display:none; on mobiles for certain screen sizes. Additionally, you can have a wrapper div and set overflow:scroll, like this:

// HTML
<div class="table-wrapper">
    <table>
    ...
    </table>
</div>

// CSS
.table-wrapper {
    min-height: .01%;
    overflow-x: auto;
}
@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
}

Here's a jsFiddle. (Code taken from the Bootstrap Project)

There's lots of things you can do, but personally I find this the most multipurpose and easy to use.

[safeer008]

Wow Thanks mattster. It really is helpful.

[David_50]

I rather prefer dimensions in % than pixels, so they scale automatically.

[mattster]

You mean in the breakpoints? Because that is impossible, you have to define an exact size.

Percentages are okay, as long as they are controlled. Percent widths soon get very difficult when it comes to different devices/screen sizes. Personally, I find it easier to use fixed widths, then I can be sure how it will look on the majority of pages.

To manage percent widths properly, you will need alot more breakpoints to handle different sizes = effort.