DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > CSS3 Responsive Tables

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.

Paul Underwood user avatar by
Paul Underwood
·
Apr. 06, 16 · Web Dev Zone · Tutorial
Like (8)
Save
Tweet
4.98K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Database CSS

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Modernize Legacy Code in Production: Rebuild Your Airplane Midflight Without Crashing
  • Why Is Software Integration Important for Business?
  • After COVID, Developers Really Are the New Kingmakers
  • Creating a REST Web Service With Java and Spring (Part 1)

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo