Cacher is the code snippet organizer for pro developers

reference:
https://css-tricks.com/responsive-data-tables/

TABLE 1:
<table>
		<thead>
		<tr>
			<th>Membership</th>
			<th>Boat Discount</th>
			<th>Kayak & SUP Discount</th>
			<th>Jet Ski Discount</th>
			<th>Monthly Rate</th>
			<th>Add a Person</th>
			<th>Lifetime Renewal</th>

		</tr>
		</thead>
		<tbody>
		<tr >
			<td class="t1" style="color:#CD7F32;">Bronze</td>
			<td class="t1">25%</td>
			<td class="t1">30%</td>
			<td class="t1">20%</td>
			<td class="t1">$199</td>
			<td class="t1">$99</td>
			<td class="t1">N/A</td>

		</tr>
		<tr>
		  <td class="t1" style="color:#C0C0C0;">Silver</td>
		  <td class="t1">50%</td>
		  <td class="t1">50%</td>
		  <td class="t1">30%</td>
		  <td class="t1">$299</td>
		  <td class="t1">$149</td>
		  <td class="t1">N/A</td>
		</tr>
		<tr>
		  <td class="t1" style="color:#E9C505;">Gold</td>
		  <td class="t1">75%</td>
		  <td class="t1">FREE</td>
		  <td class="t1">50%</td>
		  <td class="t1">$399</td>
		  <td class="t1">$199</td>
		  <td class="t1">$199</td>
		</tr>
		</tbody>
	</table>



TABLE 2:

	<table>
		<thead>
		<tr>
			<th >Cost</th>
			<th >Increased %</th>
			<th>Rental Credit</th>
			<th>Approximate Hours</th>
			<th>Term</th>

		</tr>
		</thead>
		<tbody>
		<tr>
			<td class="t2">$1000</td>
			<td class="t2">20%</td>
			<td class="t2">$1200</td>
			<td class="t2">20</td>
			<td class="t2">12 month</td>

		</tr>
		<tr>
		  <td class="t2">$2500</td>
		  <td class="t2">30%</td>
		  <td class="t2">$3250</td>
		  <td class="t2">58</td>
		  <td class="t2">12 month</td>
		</tr>
		<tr>
		  <td class="t2">$5000</td>
		  <td class="t2">40%</td>
		  <td class="t2">$7000</td>
		  <td class="t2">125</td>
		  <td class="t2">18 month</td>
		</tr>
		<tr>
		  <td class="t2">$7500</td>
		  <td class="t2">50%</td>
		  <td class="t2">$11250</td>
		  <td class="t2">200</td>
		  <td class="t2">20 month</td>
		</tr>
		<tr>
		  <td class="t2">$10000</td>
		  <td class="t2">75%</td>
		  <td class="t2">$17500</td>
		  <td class="t2">312</td>
		  <td class="t2">24 month</td>
		</tr>
		</tbody>
	</table>




<!-- CSS for data labels   -->
	@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 { border: 1px solid #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: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data  */
		/* For TABLE 1   */
		td.t1:nth-of-type(1):before { content: "Membership"; }
		td.t1:nth-of-type(2):before { content: "Boat Discount"; }
		td.t1:nth-of-type(3):before { content: "Kayak & SUP Discount"; }
		td.t1:nth-of-type(4):before { content: "Jet Ski Discount"; }
		td.t1:nth-of-type(5):before { content: "Monthly Rate"; }
		td.t1:nth-of-type(6):before { content: "Add a Person"; }
		td.t1:nth-of-type(7):before { content: "Lifetime Renewal"; }
		
		/* For TABLE 2   */
		td.t2:nth-of-type(1):before { content: "Cost"; }
		td.t2:nth-of-type(2):before { content: "Increased%"; }
		td.t2:nth-of-type(3):before { content: "Rental Credit"; }
		td.t2:nth-of-type(4):before { content: "Approximate Hours"; }
		td.t2:nth-of-type(5):before { content: "Term"; }
		
	}
	
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}


<!--  CSS  -->

* { 
	margin: 0; 
	padding: 0; 
}
body { 
	font: 14px/1.4 Georgia, Serif; 
}
#page-wrap {
	margin: 50px;
}
p {
	margin: 20px 0; 
}

	/* 
	Generic Styling, for Desktops/Laptops 
	*/
	table { 
		width: 100%; 
		border-collapse: collapse; 
	}
	/* Zebra striping */
	tr:nth-of-type(odd) { 
		background: #eee; 
	}
	th { 
		background: #333; 
		color: white; 
		font-weight: bold; 
	}
	td, th { 
		padding: 6px; 
		border: 1px solid #ccc; 
		text-align: left; 
	}