3 Years
Discussion Span
Last Post by mattster

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.


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:

<div class="table-wrapper">

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


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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.