This post contains a total of 7+ Hand-Picked CSS Responsive Table Examples with Source Code. All these CSS Tables are Responsive and works perfect on different size screens.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Responsive Table Examples
1. By Trevor Nestman
Made by Trevor Nestman. Simple Responsive CSS Table with ‘Resize me’ animation at the bottom. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import 'https://fonts.googleapis.com/css?family=Open+Sans:600,700';
* {font-family: 'Open Sans', sans-serif;}
.rwd-table {
margin: auto;
min-width: 300px;
max-width: 100%;
border-collapse: collapse;
}
.rwd-table tr:first-child {
border-top: none;
background: #428bca;
color: #fff;
}
.rwd-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f9fc;
}
.rwd-table tr:nth-child(odd):not(:first-child) {
background-color: #ebf3f9;
}
.rwd-table th {
display: none;
}
.rwd-table td {
display: block;
}
.rwd-table td:first-child {
margin-top: .5em;
}
.rwd-table td:last-child {
margin-bottom: .5em;
}
.rwd-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 120px;
display: inline-block;
color: #000;
}
.rwd-table th,
.rwd-table td {
text-align: left;
}
.rwd-table {
color: #333;
border-radius: .4em;
overflow: hidden;
}
.rwd-table tr {
border-color: #bfbfbf;
}
.rwd-table th,
.rwd-table td {
padding: .5em 1em;
}
@media screen and (max-width: 601px) {
.rwd-table tr:nth-child(2) {
border-top: none;
}
}
@media screen and (min-width: 600px) {
.rwd-table tr:hover:not(:first-child) {
background-color: #d8e7f3;
}
.rwd-table td:before {
display: none;
}
.rwd-table th,
.rwd-table td {
display: table-cell;
padding: .25em .5em;
}
.rwd-table th:first-child,
.rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child,
.rwd-table td:last-child {
padding-right: 0;
}
.rwd-table th,
.rwd-table td {
padding: 1em !important;
}
}
/* THE END OF THE IMPORTANT STUFF */
/* Basic Styling */
body {
background: #4B79A1;
background: -webkit-linear-gradient(to left, #4B79A1 , #283E51);
background: linear-gradient(to left, #4B79A1 , #283E51);
}
h1 {
text-align: center;
font-size: 2.4em;
color: #f2f2f2;
}
.container {
display: block;
text-align: center;
}
h3 {
display: inline-block;
position: relative;
text-align: center;
font-size: 1.5em;
color: #cecece;
}
h3:before {
content: "\25C0";
position: absolute;
left: -50px;
-webkit-animation: leftRight 2s linear infinite;
animation: leftRight 2s linear infinite;
}
h3:after {
content: "\25b6";
position: absolute;
right: -50px;
-webkit-animation: leftRight 2s linear infinite reverse;
animation: leftRight 2s linear infinite reverse;
}
@-webkit-keyframes leftRight {
0% { -webkit-transform: translateX(0)}
25% { -webkit-transform: translateX(-10px)}
75% { -webkit-transform: translateX(10px)}
100% { -webkit-transform: translateX(0)}
}
@keyframes leftRight {
0% { transform: translateX(0)}
25% { transform: translateX(-10px)}
75% { transform: translateX(10px)}
100% { transform: translateX(0)}
}
/*
Don't look at this last part. It's unnecessary. I was just playing with pixel gradients... Don't judge.
*/
/*
@media screen and (max-width: 601px) {
.rwd-table tr {
background-image: -webkit-linear-gradient(left, #428bca 137px, #f5f9fc 1px, #f5f9fc 100%);
background-image: -moz-linear-gradient(left, #428bca 137px, #f5f9fc 1px, #f5f9fc 100%);
background-image: -o-linear-gradient(left, #428bca 137px, #f5f9fc 1px, #f5f9fc 100%);
background-image: -ms-linear-gradient(left, #428bca 137px, #f5f9fc 1px, #f5f9fc 100%);
background-image: linear-gradient(left, #428bca 137px, #f5f9fc 1px, #f5f9fc 100%);
}
.rwd-table tr:nth-child(odd) {
background-image: -webkit-linear-gradient(left, #428bca 137px, #ebf3f9 1px, #ebf3f9 100%);
background-image: -moz-linear-gradient(left, #428bca 137px, #ebf3f9 1px, #ebf3f9 100%);
background-image: -o-linear-gradient(left, #428bca 137px, #ebf3f9 1px, #ebf3f9 100%);
background-image: -ms-linear-gradient(left, #428bca 137px, #ebf3f9 1px, #ebf3f9 100%);
background-image: linear-gradient(left, #428bca 137px, #ebf3f9 1px, #ebf3f9 100%);
}
}*/
</style>
</head>
<body>
<div class="container">
<h1>Responsive Table</h1>
<table class="rwd-table">
<tbody>
<tr>
<th>Supplier Code</th>
<th>Supplier Name</th>
<th>Invoice Number</th>
<th>Invoice Date</th>
<th>Due Date</th>
<th>Net Amount</th>
</tr>
<tr>
<td data-th="Supplier Code">
UPS5005
</td>
<td data-th="Supplier Name">
UPS
</td>
<td data-th="Invoice Number">
ASDF19218
</td>
<td data-th="Invoice Date">
06/25/2016
</td>
<td data-th="Due Date">
12/25/2016
</td>
<td data-th="Net Amount">
$8,322.12
</td>
</tr>
<tr>
<td data-th="Supplier Code">
UPS3449
</td>
<td data-th="Supplier Name">
UPS South Inc.
</td>
<td data-th="Invoice Number">
ASDF29301
</td>
<td data-th="Invoice Date">
6/24/2016
</td>
<td data-th="Due Date">
12/25/2016
</td>
<td data-th="Net Amount">
$3,255.49
</td>
</tr>
<tr>
<td data-th="Supplier Code">
BOX5599
</td>
<td data-th="Supplier Name">
BOX Pro West
</td>
<td data-th="Invoice Number">
ASDF43000
</td>
<td data-th="Invoice Date">
6/27/2016
</td>
<td data-th="Due Date">
12/25/2016
</td>
<td data-th="Net Amount">
$45,255.49
</td>
</tr>
<tr>
<td data-th="Supplier Code">
PAN9999
</td>
<td data-th="Supplier Name">
Pan Providers and Co.
</td>
<td data-th="Invoice Number">
ASDF33433
</td>
<td data-th="Invoice Date">
6/29/2016
</td>
<td data-th="Due Date">
12/25/2016
</td>
<td data-th="Net Amount">
$12,335.69
</td>
</tr>
</tbody>
</table>
<h3>Resize Me</h3>
</div>
</body>
</html>2. By Davide Rizzo
Made by Davide Rizzo. Responsive Row oriented table. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Variables
================================== */
/* Tables
================================== */
.Rtable {
display: flex;
flex-wrap: wrap;
margin: 0 0 3em 0;
padding: 0;
}
.Rtable-cell {
box-sizing: border-box;
flex-grow: 1;
width: 100%;
padding: 0.8em 1.2em;
overflow: hidden;
list-style: none;
border: solid 3px white;
background: rgba(112, 128, 144, 0.2);
}
.Rtable-cell > h1,
.Rtable-cell > h2,
.Rtable-cell > h3,
.Rtable-cell > h4,
.Rtable-cell > h5,
.Rtable-cell > h6 {
margin: 0;
}
/* Table column sizing
================================== */
.Rtable--2cols > .Rtable-cell {
width: 50%;
}
.Rtable--3cols > .Rtable-cell {
width: 33.33%;
}
.Rtable--4cols > .Rtable-cell {
width: 25%;
}
.Rtable--5cols > .Rtable-cell {
width: 20%;
}
.Rtable--6cols > .Rtable-cell {
width: 16.6%;
}
/* Page styling
================================== */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/josefinsans/v25/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMZhKg.ttf) format('truetype');
}
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/josefinsans/v25/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_N_XbMZhKg.ttf) format('truetype');
}
html {
height: 100%;
background-color: #EEE;
}
body {
box-sizing: border-box;
min-height: 100%;
margin: 0 auto;
padding: 2em;
max-width: 800px;
font-family: 'Josefin Sans', sans-serif;
font-size: 1.2em;
background-color: white;
border: double 3px #DDD;
border-top: none;
border-bottom: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1em;
}
strong {
color: #434d57;
}
</style>
</head>
<body>
<h2>Row oriented table</h2>
<div class="Rtable Rtable--4cols">
<div class="Rtable-cell"><h3>Eddard Stark</h3></div>
<div class="Rtable-cell">Has a sword named Ice</div>
<div class="Rtable-cell">No direwolf</div>
<div class="Rtable-cell"><strong>Lord of Winterfell</strong></div>
<div class="Rtable-cell"><h3>Jon Snow</h3></div>
<div class="Rtable-cell">Has a sword named Longclaw</div>
<div class="Rtable-cell">Direwolf: Ghost</div>
<div class="Rtable-cell"><strong>Knows nothing</strong></div>
<div class="Rtable-cell"><h3>Arya Stark</h3></div>
<div class="Rtable-cell">Has a sword named Needle</div>
<div class="Rtable-cell">Direwolf: Nymeria</div>
<div class="Rtable-cell"><strong>No one</strong></div>
</div>
</body>
</html>3. By Alico
Made by Alico. Simple CSS Responsive table. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
border-spacing: 1;
border-collapse: collapse;
background: white;
border-radius: 6px;
overflow: hidden;
max-width: 800px;
width: 100%;
margin: 0 auto;
position: relative;
}
table * {
position: relative;
}
table td, table th {
padding-left: 8px;
}
table thead tr {
height: 60px;
background: #FFED86;
font-size: 16px;
}
table tbody tr {
height: 48px;
border-bottom: 1px solid #E3F1D5;
}
table tbody tr:last-child {
border: 0;
}
table td, table th {
text-align: left;
}
table td.l, table th.l {
text-align: right;
}
table td.c, table th.c {
text-align: center;
}
table td.r, table th.r {
text-align: center;
}
@media screen and (max-width: 35.5em) {
table {
display: block;
}
table > *, table tr, table td, table th {
display: block;
}
table thead {
display: none;
}
table tbody tr {
height: auto;
padding: 8px 0;
}
table tbody tr td {
padding-left: 45%;
margin-bottom: 12px;
}
table tbody tr td:last-child {
margin-bottom: 0;
}
table tbody tr td:before {
position: absolute;
font-weight: 700;
width: 40%;
left: 10px;
top: 0;
}
table tbody tr td:nth-child(1):before {
content: "Code";
}
table tbody tr td:nth-child(2):before {
content: "Stock";
}
table tbody tr td:nth-child(3):before {
content: "Cap";
}
table tbody tr td:nth-child(4):before {
content: "Inch";
}
table tbody tr td:nth-child(5):before {
content: "Box Type";
}
}
body {
background: #9BC86A;
font: 400 14px "Calibri", "Arial";
padding: 20px;
}
blockquote {
color: white;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>CODE</th>
<th>STOCK</th>
<th>CAP</th>
<th>INCH</th>
<th>BOX TYPE</th>
</tr>
<thead>
<tbody>
<tr>
<td>CES-9000</td>
<td>50mt</td>
<td>9mm</td>
<td>1/2"</td>
<td>Kangal / Coil</td>
</tr>
<tr>
<td>CES-9000</td>
<td>50mt</td>
<td>9mm</td>
<td>1/2"</td>
<td>Kangal / Coil</td>
</tr>
<tr>
<td>CES-9000</td>
<td>50mt</td>
<td>9mm</td>
<td>1/2"</td>
<td>Kangal / Coil</td>
</tr>
<tr>
<td>CES-9000</td>
<td>50mt</td>
<td>9mm</td>
<td>1/2"</td>
<td>Kangal / Coil</td>
</tr>
</tbody>
<table/>
</body>
</html>4. By Jordy van Raaij
Made by Jordy van Raaij. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.responstable {
margin: 1em 0;
width: 100%;
overflow: hidden;
background: #FFF;
color: #024457;
border-radius: 10px;
border: 1px solid #167F92;
}
.responstable tr {
border: 1px solid #D9E4E6;
}
.responstable tr:nth-child(odd) {
background-color: #EAF3F3;
}
.responstable th {
display: none;
border: 1px solid #FFF;
background-color: #167F92;
color: #FFF;
padding: 1em;
}
.responstable th:first-child {
display: table-cell;
text-align: center;
}
.responstable th:nth-child(2) {
display: table-cell;
}
.responstable th:nth-child(2) span {
display: none;
}
.responstable th:nth-child(2):after {
content: attr(data-th);
}
@media (min-width: 480px) {
.responstable th:nth-child(2) span {
display: block;
}
.responstable th:nth-child(2):after {
display: none;
}
}
.responstable td {
display: block;
word-wrap: break-word;
max-width: 7em;
}
.responstable td:first-child {
display: table-cell;
text-align: center;
border-right: 1px solid #D9E4E6;
}
@media (min-width: 480px) {
.responstable td {
border: 1px solid #D9E4E6;
}
}
.responstable th, .responstable td {
text-align: left;
margin: .5em 1em;
}
@media (min-width: 480px) {
.responstable th, .responstable td {
display: table-cell;
padding: 1em;
}
}
body {
padding: 0 2em;
font-family: Arial, sans-serif;
color: #024457;
background: #f2f2f2;
}
h1 {
font-family: Verdana;
font-weight: normal;
color: #024457;
}
h1 span {
color: #167F92;
}
</style>
</head>
<body>
<h1>Responstable <span>2.0</span> by <span>jordyvanraaij</span></h1>
<table class="responstable">
<tr>
<th>Main driver</th>
<th data-th="Driver details"><span>First name</span></th>
<th>Surname</th>
<th>Date of birth</th>
<th>Relationship</th>
</tr>
<tr>
<td><input type="radio"/></td>
<td>Steve</td>
<td>Foo</td>
<td>01/01/1978</td>
<td>Policyholder</td>
</tr>
<tr>
<td><input type="radio"/></td>
<td>Steffie</td>
<td>Foo</td>
<td>01/01/1978</td>
<td>Spouse</td>
</tr>
<tr>
<td><input type="radio"/></td>
<td>Stan</td>
<td>Foo</td>
<td>01/01/1994</td>
<td>Son</td>
</tr>
<tr>
<td><input type="radio"/></td>
<td>Stella</td>
<td>Foo</td>
<td>01/01/1992</td>
<td>Daughter</td>
</tr>
</table>
</body>
</html>5. By Pablo García
Made by Pablo García. Responsive table with 3D Hover effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.42em;
color:#A7A1AE;
background-color:#1F2739;
}
h1 {
font-size:3em;
font-weight: 300;
line-height:1em;
text-align: center;
color: #4DC3FA;
}
h2 {
font-size:1em;
font-weight: 300;
text-align: center;
display: block;
line-height:1em;
padding-bottom: 2em;
color: #FB667A;
}
h2 a {
font-weight: 700;
text-transform: uppercase;
color: #FB667A;
text-decoration: none;
}
.blue { color: #185875; }
.yellow { color: #FFF842; }
.container th h1 {
font-weight: bold;
font-size: 1em;
text-align: left;
color: #185875;
}
.container td {
font-weight: normal;
font-size: 1em;
-webkit-box-shadow: 0 2px 2px -2px #0E1119;
-moz-box-shadow: 0 2px 2px -2px #0E1119;
box-shadow: 0 2px 2px -2px #0E1119;
}
.container {
text-align: left;
overflow: hidden;
width: 80%;
margin: 0 auto;
display: table;
padding: 0 0 8em 0;
}
.container td, .container th {
padding-bottom: 2%;
padding-top: 2%;
padding-left:2%;
}
/* Background-color of the odd rows */
.container tr:nth-child(odd) {
background-color: #323C50;
}
/* Background-color of the even rows */
.container tr:nth-child(even) {
background-color: #2C3446;
}
.container th {
background-color: #1F2739;
}
.container td:first-child { color: #FB667A; }
.container tr:hover {
background-color: #464A52;
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
-moz-box-shadow: 0 6px 6px -6px #0E1119;
box-shadow: 0 6px 6px -6px #0E1119;
}
.container td:hover {
background-color: #FFF842;
color: #403E10;
font-weight: bold;
box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
transform: translate3d(6px, -6px, 0);
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: all;
transition-timing-function: line;
}
@media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) { display: none; }
}
</style>
</head>
<body>
<h1><span class="blue"><</span>Table<span class="blue">></span> <span class="yellow">Responsive</pan></h1>
<h2>Created with love by <a href="https://github.com/pablorgarcia" target="_blank">Pablo García</a></h2>
<table class="container">
<thead>
<tr>
<th><h1>Sites</h1></th>
<th><h1>Views</h1></th>
<th><h1>Clicks</h1></th>
<th><h1>Average</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td>9518</td>
<td>6369</td>
<td>01:32:50</td>
</tr>
<tr>
<td>Twitter</td>
<td>7326</td>
<td>10437</td>
<td>00:51:22</td>
</tr>
<tr>
<td>Amazon</td>
<td>4162</td>
<td>5327</td>
<td>00:24:34</td>
</tr>
<tr>
<td>LinkedIn</td>
<td>3654</td>
<td>2961</td>
<td>00:12:10</td>
</tr>
<tr>
<td>CodePen</td>
<td>2002</td>
<td>4135</td>
<td>00:46:19</td>
</tr>
<tr>
<td>GitHub</td>
<td>4623</td>
<td>3486</td>
<td>00:31:52</td>
</tr>
</tbody>
</table>
</body>
</html>6. By Luke Peters
Made by Luke Peters. CSS Responsive Table Layout. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
background: #2b2b2b;
}
@media screen and (max-width: 580px) {
body {
font-size: 16px;
line-height: 22px;
}
}
.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;
}
@media screen and (max-width: 580px) {
.table {
display: block;
}
}
.row {
display: table-row;
background: #f6f6f6;
}
.row:nth-of-type(odd) {
background: #e9e9e9;
}
.row.header {
font-weight: 900;
color: #ffffff;
background: #ea6153;
}
.row.green {
background: #27ae60;
}
.row.blue {
background: #2980b9;
}
@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;
}
}
.cell {
padding: 6px 12px;
display: table-cell;
}
@media screen and (max-width: 580px) {
.cell {
padding: 2px 16px;
display: block;
}
}
</style>
</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">
Luke Peters
</div>
<div class="cell" data-title="Age">
25
</div>
<div class="cell" data-title="Occupation">
Freelance Web Developer
</div>
<div class="cell" data-title="Location">
Brookline, MA
</div>
</div>
<div class="row">
<div class="cell" data-title="Name">
Joseph Smith
</div>
<div class="cell" data-title="Age">
27
</div>
<div class="cell" data-title="Occupation">
Project Manager
</div>
<div class="cell" data-title="Location">
Somerville, MA
</div>
</div>
<div class="row">
<div class="cell" data-title="Name">
Maxwell Johnson
</div>
<div class="cell" data-title="Age">
26
</div>
<div class="cell" data-title="Occupation">
UX Architect & Designer
</div>
<div class="cell" data-title="Location">
Arlington, MA
</div>
</div>
<div class="row">
<div class="cell" data-title="Name">
Harry Harrison
</div>
<div class="cell" data-title="Age">
25
</div>
<div class="cell" data-title="Occupation">
Front-End Developer
</div>
<div class="cell" data-title="Location">
Boston, MA
</div>
</div>
</div>
<div class="table">
<div class="row header green">
<div class="cell">
Product
</div>
<div class="cell">
Unit Price
</div>
<div class="cell">
Quantity
</div>
<div class="cell">
Date Sold
</div>
<div class="cell">
Status
</div>
</div>
<div class="row">
<div class="cell" data-title="Product">
Solid oak work table
</div>
<div class="cell" data-title="Unit Price">
$800
</div>
<div class="cell" data-title="Quantity">
10
</div>
<div class="cell" data-title="Date Sold">
03/15/2014
</div>
<div class="cell" data-title="Status">
Waiting for Pickup
</div>
</div>
<div class="row">
<div class="cell" data-title="Product">
Leather iPhone wallet
</div>
<div class="cell" data-title="Unit Price">
$45
</div>
<div class="cell" data-title="Quantity">
120
</div>
<div class="cell" data-title="Date Sold">
02/28/2014
</div>
<div class="cell" data-title="Status">
In Transit
</div>
</div>
<div class="row">
<div class="cell" data-title="Product">
27" Apple Thunderbolt displays
</div>
<div class="cell" data-title="Unit Price">
$1000
</div>
<div class="cell" data-title="Quantity">
25
</div>
<div class="cell" data-title="Date Sold">
02/10/2014
</div>
<div class="cell" data-title="Status">
Delivered
</div>
</div>
<div class="row">
<div class="cell" data-title="Product">
Bose studio headphones
</div>
<div class="cell" data-title="Unit Price">
$60
</div>
<div class="cell" data-title="Quantity">
90
</div>
<div class="cell" data-title="Date Sold">
01/14/2014
</div>
<div class="cell" data-title="Status">
Delivered
</div>
</div>
</div>
</div>
</body>
</html>7. By CSS-Tricks
Made by CSS-Tricks. Basic Responsive table. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
*/
@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin: 0 0 1rem 0;
}
tr:nth-child(odd) {
background: #ccc;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Secret Alias"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
</style>
</head>
<body>
<table role="table">
<thead role="rowgroup">
<tr role="row">
<th role="columnheader">First Name</th>
<th role="columnheader">Last Name</th>
<th role="columnheader">Job Title</th>
<th role="columnheader">Favorite Color</th>
<th role="columnheader">Wars or Trek?</th>
<th role="columnheader">Secret Alias</th>
<th role="columnheader">Date of Birth</th>
<th role="columnheader">Dream Vacation City</th>
<th role="columnheader">GPA</th>
<th role="columnheader">Arbitrary Data</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row">
<td role="cell">James</td>
<td role="cell">Matman</td>
<td role="cell">Chief Sandwich Eater</td>
<td role="cell">Lettuce Green</td>
<td role="cell">Trek</td>
<td role="cell">Digby Green</td>
<td role="cell">January 13, 1979</td>
<td role="cell">Gotham City</td>
<td role="cell">3.1</td>
<td role="cell">RBX-12</td>
</tr>
<tr role="row">
<td role="cell">The</td>
<td role="cell">Tick</td>
<td role="cell">Crimefighter Sorta</td>
<td role="cell">Blue</td>
<td role="cell">Wars</td>
<td role="cell">John Smith</td>
<td role="cell">July 19, 1968</td>
<td role="cell">Athens</td>
<td role="cell">N/A</td>
<td role="cell">Edlund, Ben (July 1996).</td>
</tr>
<tr role="row">
<td role="cell">Jokey</td>
<td role="cell">Smurf</td>
<td role="cell">Giving Exploding Presents</td>
<td role="cell">Smurflow</td>
<td role="cell">Smurf</td>
<td role="cell">Smurflane Smurfmutt</td>
<td role="cell">Smurfuary Smurfteenth, 1945</td>
<td role="cell">New Smurf City</td>
<td role="cell">4.Smurf</td>
<td role="cell">One</td>
</tr>
<tr role="row">
<td role="cell">Cindy</td>
<td role="cell">Beyler</td>
<td role="cell">Sales Representative</td>
<td role="cell">Red</td>
<td role="cell">Wars</td>
<td role="cell">Lori Quivey</td>
<td role="cell">July 5, 1956</td>
<td role="cell">Paris</td>
<td role="cell">3.4</td>
<td role="cell">3451</td>
</tr>
<tr role="row">
<td role="cell">Captain</td>
<td role="cell">Cool</td>
<td role="cell">Tree Crusher</td>
<td role="cell">Blue</td>
<td role="cell">Wars</td>
<td role="cell">Steve 42nd</td>
<td role="cell">December 13, 1982</td>
<td role="cell">Las Vegas</td>
<td role="cell">1.9</td>
<td role="cell">Under the couch</td>
</tr>
</tbody>
</table>
</body>
</html>8. By Matt Smith
Made by Matt Smith. Simple Responsive Table in CSS. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<style>
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
/* general styling */
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
</style>
</head>
<body>
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Acount">Visa - 3412</td>
<td data-label="Due Date">02/01/2016</td>
<td data-label="Amount">$842</td>
<td data-label="Period">01/01/2016 - 01/31/2016</td>
</tr>
</tbody>
</table>
</body>
</html>