Over a million developers have joined DZone.

CSS3 Responsive Tables

In this tutorial, we're going to look at how we can use tables on responsive layouts and how to make these tables usable on mobile devices. Check out how it's done using this CSS responsive solution.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

In this tutorial, we're going to look at how we can use tables on responsive layouts and how to make these tables usable on mobile devices.

When tables are on responsive layouts, you will find that you face a number of problems, such as:

  • Too many columns
  • Words overflowing the cells
  • Column width being too small
  • If you have a lot of rows, as you scroll you can't see the column headers

In this tutorial, we will hopefully fix all these problems by using CSS responsive solution.

First, we need to create a table we can use to test responsiveness, so here's a list of the top 5 movies on IMDB.

MovieRelease DateIMDB RatingDirectorStaring
The Shawshank Redemption19949.3/10Frank DarabontTim Robbins, Morgan Freeman, Bob Gunton
The Godfather19729.2/10Francis Ford CoppolaMarlon Brando, Al Pacino, James Caan
The Godfather: Part II19759/10Francis Ford CoppolaAl Pacino, Robert De Niro, Robert Duvall
The Dark Knight20089/10Christopher NolanChristian Bale, Heath Ledger, Aaron Eckhart
Schindler's List19938.9/10Steven SpielbergLiam Neeson, Ralph Fiennes, Ben Kingsley
<table>
  <thead>
  <tr>
    <th>Movie</th>
    <th>Release Date</th>
    <th>IMDB Rating</th>
    <th>Director</th>
    <th>Staring</th>
  </tr>
  </thead>
  <tr>
    <td data-title="Movie">The Shawshank Redemption</td>
    <td data-title="Release Date">1994</td>
    <td data-title="IMDB Rating">9.3/10</td>
    <td data-title="Director">Frank Darabont</td>
    <td data-title="Staring">Tim Robbins, Morgan Freeman, Bob Gunton</td>
  </tr>
  <tr>
    <td data-title="Movie">The Godfather</td>
    <td data-title="Release Date">1972</td>
    <td data-title="IMDB Rating">9.2/10</td>
    <td data-title="Director">Francis Ford Coppola</td>
    <td data-title="Staring">Marlon Brando, Al Pacino, James Caan</td>
  </tr>
  <tr>
    <td data-title="Movie">The Godfather: Part II</td>
    <td data-title="Release Date">1975</td>
    <td data-title="IMDB Rating">9/10</td>
    <td data-title="Director">Francis Ford Coppola</td>
    <td data-title="Staring">Al Pacino, Robert De Niro, Robert Duvall</td>
  </tr>
  <tr>
    <td data-title="Movie">The Dark Knight</td>
    <td data-title="Release Date">2008</td>
    <td data-title="IMDB Rating">9/10</td>
    <td data-title="Director">Christopher Nolan</td>
    <td data-title="Staring">Christian Bale, Heath Ledger, Aaron Eckhart</td>
  </tr>
  <tr>
    <td data-title="Movie">Schindler's List </td>
    <td data-title="Release Date">1993</td>
    <td data-title="IMDB Rating">8.9/10</td>
    <td data-title="Director">Steven Spielberg</td>
    <td data-title="Staring">Liam Neeson, Ralph Fiennes, Ben Kingsley</td>
  </tr>
</table>

You'll notice it's just a normal table with an added attribute to the table cells which we can use for the cell titles when the table is responsive, all by using CSS. This is because in CSS you have access to display the content of an HTML attribute in pseudo classes of :before and :after using the content property.

If we want to view this table on a mobile device, it will look like this:

Image title

As you can see, the table isn't really usable on a mobile device and the last column has so much text in it that you can't read things correctly.

So, now we need to change the table styling on mobile devices by using media queries so that it looks like this.

responsive-table-mobile

First, we define the media query that we need to use on mobile devices.

@media screen and (max-width: 320px) 
{
    // Style the table on mobile devices
}

Then we can change the styling of the table to behave on a mobile device. First, we're going to hide the table headers as we are moving the headers next to the data instead of above it.

table thead 
{
    display: none;
}

We're moving the cells in the table to switch from next to each other to on top of each other, so we need to add some gaps between the rows by adding a margin to the bottom of these rows.

table tr 
{
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
}

In order to move the cells to be on top of each other, we need to change the cells to display: block; and move the text to the right of the cell so that there's space for the title on the left.

table td 
{
    display: block;
    text-align: right;
    font-size: 13px;
    border-bottom: 1px dotted #ccc;
}

table td:last-child 
{
    border-bottom: 0;
}

Next, we can add the title of the cell to the left of the data by using the :before pseudo class and adding the content data-title.

table td:before 
{
    content: attr(data-title);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
}

Below is the full code you will need to use in your CSS to create these responsive CSS tables.

@media screen and (max-width: 320px) 
{
    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-title);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
}

Below you'll find a link to the CodePen used in the demo so that you can resize the HTML section to see how the table view will change on mobile devices.

See the Pen QNvBRd by Paul (@paulund) on CodePen.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
javascript ,web dev ,css ,css3 ,responsive

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}