<!-- adapted from https://css-tricks.com/examples/ResponsiveTables/responsive.php -->
<table>
		<thead>
				<tr>
						<th>First Name</th>
						<th>Last Name</th>
						<th>Job Title</th>
						<th>Favorite Color</th>
						<th>Wars or Trek?</th>
						<th>Porn Name</th>
						<th>Date of Birth</th>
						<th>Dream Vacation City</th>
						<th>GPA</th>
						<th>Arbitrary Data</th>
				</tr>
		</thead>
		<tbody>
				<tr>
						<td>James</td>
						<td>Matman</td>
						<td>Chief Sandwich Eater with longer text to wrap</td>
						<td>Lettuce Green</td>
						<td>Trek</td>
						<td>Digby Green</td>
						<td>January 13, 1979</td>
						<td>Gotham City</td>
						<td>3.1</td>
						<td>RBX-12</td>
				</tr>
				<tr>
						<td>The</td>
						<td>Tick</td>
						<td>Crimefighter Sorta</td>
						<td>Blue</td>
						<td>Wars</td>
						<td>John Smith</td>
						<td>July 19, 1968</td>
						<td>Athens</td>
						<td>N/A</td>
						<td>Edlund, Ben (July 1996).</td>
				</tr>
				<tr>
						<td>Jokey</td>
						<td>Smurf</td>
						<td>Giving Exploding Presents</td>
						<td>Smurflow</td>
						<td>Smurf</td>
						<td>Smurflane Smurfmutt</td>
						<td>Smurfuary Smurfteenth, 1945</td>
						<td>New Smurf City</td>
						<td>4.Smurf</td>
						<td>One</td>
				</tr>
				<tr>
						<td>Cindy</td>
						<td>Beyler</td>
						<td>Sales Representative</td>
						<td>Red</td>
						<td>Wars</td>
						<td>Lori Quivey</td>
						<td>July 5, 1956</td>
						<td>Paris</td>
						<td>3.4</td>
						<td>3451</td>
				</tr>
				<tr>
						<td>Captain</td>
						<td>Cool</td>
						<td>Tree Crusher</td>
						<td>Blue</td>
						<td>Wars</td>
						<td>Steve 42nd</td>
						<td>December 13, 1982</td>
						<td>Las Vegas</td>
						<td>1.9</td>
						<td>Under the couch</td>
				</tr>
		</tbody>
</table>
table {
	border:1px solid #000;
	border-collapse:collapse;
	width:100%;
	max-width:960px;
	margin:auto;
}
td,th {
	border:1px solid #000;
	padding:5px;
}
@media only screen and (max-width: 760px) {
table, tbody, thead, tbody, th, td, tr {
	display: block;
	float:left;/* ie9 fix */
	width:100%;
	clear:both;
}
thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
tr {
	border: 1px solid #ccc;
}
td,th {
	border: none;
	border-bottom: 1px solid #eee;
}
td:before {
	float:left;
	width: 95%;
	padding:0 0 0 1%;
  margin-left:-100%;
}
 td{
  padding-left:50%;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
  box-sizing:border-box; 
 }

  
/*
		Label the data
		*/
td:nth-of-type(1):before {content: "First Name that is very long an will wrap to another line";}
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 which may be blue or it may not be blue. I just don't know";}
td:nth-of-type(5):before {content: "Wars of Trek?";}
td:nth-of-type(6):before {content: "Porn Name";}
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";}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.