O'Reilly logo

Instant HTML5 Responsive Table Design How-to by Fernando Monteiro

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Dealing with numbers (Intermediate)

Let's look at another alternative now. How to deal with numerical tables? When dealing with responsive design it is strongly recommended that you develop your application from the bottom up, that is the smallest to the largest 320px to 1024px or 1280px to 1360px. This way of development is known as mobile first.

Getting ready

It is hard to imagine how to show a table with over 10 columns on such a small screen. Let's see a pretty interesting alternative. Using another trick with a jQuery Plugin called: Footable.js.

How to do it...

First let's take a look in our table:

How to do it...

Full width table of 1024px

Now on resizing, we have ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required