Responsive CSS Tables

Responsive CSS Tables

Responsive CSS TablesIn order to display tabular data on web pages responsively, you can either use CSS to create your own table layout or style the default <table> tag with CSS so that it’s responsive. This post will outline how you can easily setup some responsive tables with less than 100 lines of CSS. Let’s get started with the styles required for designing some beautiful responsive tables. Copy the CSS styles below to your stylesheet:

/* core styles === */
body { font-family: "Helvetica Neue", Helvetica, Arial; font-size: 14px; line-height: 20px; font-weight: 500; color: #333; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; background: #d7d7d7;}

.wrapper { margin: 0 auto; padding: 40px; max-width: 800px;}

.table { margin: 0 0 40px 0; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: table;}

.row { display: table-row; background: #f6f6f6;}

.row:nth-of-type(odd) { background: #e9e9e9;}

.row.header { font-weight: 900; color: #ffffff; background: #cd1212;}

.row.green { background: #2f8c64;}

.row.blue { background: #0049ac;}

.cell { padding: 6px 12px; display: table-cell;}

/* media queries === */
@media screen and (max-width: 580px) {
.row {
padding: 14px 0 7px;
display: block;
}
.row.header {
padding: 0;
height: 6px;
}
.row.header .cell {
display: none;
}
.row .cell {
margin-bottom: 10px;
}
.row .cell:before {
margin-bottom: 3px;
content: attr(data-title);
min-width: 98px;
font-size: 10px;
line-height: 10px;
font-weight: bold;
text-transform: uppercase;
color: #969696;
display: block;
}
}

@media screen and (max-width: 580px) {
body {
font-size: 16px;
line-height: 22px;
}
}

@media screen and (max-width: 580px) {
.table {
display: block;
}
}

@media screen and (max-width: 580px) {
.cell {
padding: 2px 16px;
display: block;
}
}

Next you can copy the example page with demo content below:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Responsive CSS Based Tables</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="wrapper">
<div class="table">
<div class="row header">
<div class="cell">Name</div>
<div class="cell">Age</div>
<div class="cell">Occupation</div>
<div class="cell">Location</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Linus Torvalds</div>
<div class="cell" data-title="Age">48</div>
<div class="cell" data-title="Occupation">Software Engineer</div>
<div class="cell" data-title="Location">Helsinki, Finland</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Steve Wozniak</div>
<div class="cell" data-title="Age">67</div>
<div class="cell" data-title="Occupation">Inventor</div>
<div class="cell" data-title="Location">San Jose, California</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Richard Stallman</div>
<div class="cell" data-title="Age">64</div>
<div class="cell" data-title="Occupation">Free Software Foundation</div>
<div class="cell" data-title="Location">New York City, New York</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Tony Hawk</div>
<div class="cell" data-title="Age">49</div>
<div class="cell" data-title="Occupation">Skateboarder</div>
<div class="cell" data-title="Location">Encinitas, California</div>
</div>

</div>

<div class="table">
<div class="row header green">
<div class="cell">
Name
</div>
<div class="cell">Position</div>
<div class="cell">Start Date</div>
<div class="cell">Salary</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Bill Lumbergh</div>
<div class="cell" data-title="Position">Division Vice President</div>
<div class="cell" data-title="Start Date">02/15/1999</div>
<div class="cell" data-title="Salary">$175,000</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Peter Gibbons</div>
<div class="cell" data-title="Position">Programmer</div>
<div class="cell" data-title="Start Date">03/01/2000</div>
<div class="cell" data-title="Salary">$78,000</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Michael Bolton</div>
<div class="cell" data-title="Position">Programmer</div>
<div class="cell" data-title="Start Date">06/07/2002</div>
<div class="cell" data-title="Salary">$90,000</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Milton Waddams</div>
<div class="cell" data-title="Position">Collator Operator</div>
<div class="cell" data-title="Start Date">02/21/1994</div>
<div class="cell" data-title="Salary">$35,000</div>
</div>

</div>

<div class="table">
<div class="row header blue">
<div class="cell">Name</div>
<div class="cell">Age</div>
<div class="cell">Occupation</div>
<div class="cell">Employer</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Gary Winston</div>
<div class="cell" data-title="Age">47</div>
<div class="cell" data-title="Occupation">Chief Executive Officer</div>
<div class="cell" data-title="Employer">NURV</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Milo Hoffman</div>
<div class="cell" data-title="Age">33</div>
<div class="cell" data-title="Occupation">Software Architect</div>
<div class="cell" data-title="Employer">NURV</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Teddy Chin</div>
<div class="cell" data-title="Age">28</div>
<div class="cell" data-title="Occupation">Senior Programming Engineer</div>
<div class="cell" data-title="Employer">Skullbocks</div>
</div>

<div class="row">
<div class="cell" data-title="Name">Lisa Calighan</div>
<div class="cell" data-title="Age">26</div>
<div class="cell" data-title="Occupation">Senior User Interface Designer</div>
<div class="cell" data-title="Employer">NURV</div>
</div>
</div>

</div>
</body>
</html>

Now that you have an HTML page with some demo content and the responsive table styles, you should end up with a page similar to the one in the screenshot below:

Responsive CSS Tables Full View

If you resize your browser down to a smaller size or access the page using a mobile device you will get a responsive view of the same page:

Responsive CSS Tables Responsive View

You can download the above Responsive CSS Tables example from our GitLab Repository, from GitLab.com or from GitHub.com . We hope you found this post useful, feel free to share your feedback, comments and suggestions below, Thanks!

DIGITAL PCI © 2018