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

Converting tables into graphs (Advanced)

Another alternative much discussed by the community of developers is transforming the table into a graphic when it is being displayed on small screen devices. This is not an easy task taking into account the size and amount of data that a table can have.

Let's see an alternative solution combining the previous recipes with another plugin for rendering graphics. The main reason for this combination is we use only one plugin per page, thus optimizing our load.

Getting ready

We maintained the same structure for our table, however this time we do not use this example and load it via AJAX. So the markup looks as follows, code example, Chapter06_Codes_1:

<table id="dynamicTable" class="table"> <thead> <tr> <th>Reviews</th> ...

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