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

Merging data – numbers and text (Advanced)

We introduce an alternative based on CSS3 for dealing with tables containing text and numbers.

Getting ready

Tables are used for different purposes, we will see an example where our data is not a data table. (Code Example: Chapter07_Codes_1)

Getting ready

Browser screenshot at 1024px

Although our table did not have many columns, showing it on a small screen is not easy. Hence we will progressively show the change in the table by subtracting the width of the screen.

How to do it...

Note that we have removed the .table class so this time apply the style directly in the table tags, see the following steps:

  1. Let's use a simple table ...

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