Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS3 Responsive Tables

DZone's Guide to

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
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Movie Release Date IMDB Rating Director Staring
The Shawshank Redemption 1994 9.3/10 Frank Darabont Tim Robbins, Morgan Freeman, Bob Gunton
The Godfather 1972 9.2/10 Francis Ford Coppola Marlon Brando, Al Pacino, James Caan
The Godfather: Part II 1975 9/10 Francis Ford Coppola Al Pacino, Robert De Niro, Robert Duvall
The Dark Knight 2008 9/10 Christopher Nolan Christian Bale, Heath Ledger, Aaron Eckhart
Schindler's List 1993 8.9/10 Steven Spielberg Liam 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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

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 DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}