jalbertbowden/responsive-table.html

## responsive-table.html
<html>
  <head>
    <title>Responsive Table</title>
    <meta charset="UTF-8">
    <meta name="description" content="How to create a responsive table">
    <meta name="keywords" content="HTML,CSS">
    <meta name="author" content="Martine Dowden">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
      body {
        background: #fafafa;
        color: #333;
        font-family: Helvetica, sans-serif;
        padding: 3rem;
      }
      table {
        background: #fff;
        border-collapse: collapse;
        width: 100%;
        box-shadow: 1px 1px 2px #ccc;
      }
      thead {
        left: -9999rem;
        position: absolute;
        top: -9999rem;
      }
      td {
        display: block;
        margin: .5rem 1rem;
      }
      td:before {
        color: #888;
        content: attr(name) ":";
        display: inline-block;
        font-size: .875rem;
        font-weight: 300;
        margin-right: .5rem;
      }
      tr:nth-last-of-type(even) {
        background: rgba(56, 113, 170, 0.15);
      }
      @media(min-width: 600px) {
        table {
          border-collapse: collapse;
        }
        thead {
          left: 0;
          position: relative;
          top: 0;
        }
        th {
          color: #888;
          font-size: .875rem;
          font-weight: 300;
          text-align: left;
        }
        td, th {
          display: table-cell;
          padding: .75rem 1rem;
          margin: 0;
        }
        td:before {
          content: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>Responsive Table Demo</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td name="Id">1</td>
            <td name="First Name">Zebulon</td>
            <td name="Last Name">Riddles</td>
            <td name="Email">zriddles0@hatena.ne.jp</td>
          </tr>
          <tr>
            <td name="Id">2</td>
            <td name="First Name">Loralyn</td>
            <td name="Last Name">Gallo</td>
            <td name="Email">lgallo1@sina.com.cn</td>
          </tr>
          <tr>
            <td name="Id">3</td>
            <td name="First Name">Gualterio</td>
            <td name="Last Name">Cometti</td>
            <td name="Email">gcometti2@usgs.gov</td>
          </tr>
          <tr>
            <td name="Id">4</td>
            <td name="First Name">Lyndy</td>
            <td name="Last Name">Arkcoll</td>
            <td name="Email">larkcoll3@behance.net</td>
          </tr>
        </tbody>
    </table>
  </body>
</html>
	<html>
	<head>
	<title>Responsive Table</title>
	<meta charset="UTF-8">
	<meta name="description" content="How to create a responsive table">
	<meta name="keywords" content="HTML,CSS">
	<meta name="author" content="Martine Dowden">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	body {
	background: #fafafa;
	color: #333;
	font-family: Helvetica, sans-serif;
	padding: 3rem;
	}
	table {
	background: #fff;
	border-collapse: collapse;
	width: 100%;
	box-shadow: 1px 1px 2px #ccc;
	}
	thead {
	left: -9999rem;
	position: absolute;
	top: -9999rem;
	}
	td {
	display: block;
	margin: .5rem 1rem;
	}
	td:before {
	color: #888;
	content: attr(name) ":";
	display: inline-block;
	font-size: .875rem;
	font-weight: 300;
	margin-right: .5rem;
	}
	tr:nth-last-of-type(even) {
	background: rgba(56, 113, 170, 0.15);
	}
	@media(min-width: 600px) {
	table {
	border-collapse: collapse;
	}
	thead {
	left: 0;
	position: relative;
	top: 0;
	}
	th {
	color: #888;
	font-size: .875rem;
	font-weight: 300;
	text-align: left;
	}
	td, th {
	display: table-cell;
	padding: .75rem 1rem;
	margin: 0;
	}
	td:before {
	content: none;
	}
	}
	</style>
	</head>
	<body>
	<h1>Responsive Table Demo</h1>
	<table>
	<thead>
	<tr>
	<th>ID</th>
	<th>First Name</th>
	<th>Last Name</th>
	<th>Email</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td name="Id">1</td>
	<td name="First Name">Zebulon</td>
	<td name="Last Name">Riddles</td>
	<td name="Email">zriddles0@hatena.ne.jp</td>
	</tr>
	<tr>
	<td name="Id">2</td>
	<td name="First Name">Loralyn</td>
	<td name="Last Name">Gallo</td>
	<td name="Email">lgallo1@sina.com.cn</td>
	</tr>
	<tr>
	<td name="Id">3</td>
	<td name="First Name">Gualterio</td>
	<td name="Last Name">Cometti</td>
	<td name="Email">gcometti2@usgs.gov</td>
	</tr>
	<tr>
	<td name="Id">4</td>
	<td name="First Name">Lyndy</td>
	<td name="Last Name">Arkcoll</td>
	<td name="Email">larkcoll3@behance.net</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>