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

Getting started with responsive tables (Intermediate)

Now that we already know how to run a responsive layout, let's dive into this challenging field and use some CSS3 properties to give a better design and look to our table.

Getting ready

First add the following lines at the bottom of the HTML page:

<!-- JavaScript at the bottom for fast page loading with just one js file -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://raw.github.com/scottjehl/Respond/master/respond.min.js"></script>

How to do it...

Open the example file, Chapter03_Codes_1. We need to apply our CSS to make a responsive table as follows:

  1. Add a round corner to our container class with border-radius and use max-width to ...

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