responsive table css

1@media screen and (max-width: 320px) {
2     table {
3       display: block;
4       overflow-x: auto;     }
5}

1/* 
2Generic Styling, for Desktops/Laptops 
3*/
4table { 
5  width: 100%; 
6  border-collapse: collapse; 
7}
8/* Zebra striping */
9tr:nth-of-type(odd) { 
10  background: #eee; 
11}
12th { 
13  background: #333; 
14  color: white; 
15  font-weight: bold; 
16}
17td, th { 
18  padding: 6px; 
19  border: 1px solid #ccc; 
20  text-align: left; 
21}

1/* 
2Max width before this PARTICULAR table gets nasty
3This query will take effect for any screen smaller than 760px
4and also iPads specifically.
5*/
6@media 
7only screen and (max-width: 760px),
8(min-device-width: 768px) and (max-device-width: 1024px)  {
9
10	/* Force table to not be like tables anymore */
11	table, thead, tbody, th, td, tr { 
12		display: block; 
13	}
14	
15	/* Hide table headers (but not display: none;, for accessibility) */
16	thead tr { 
17		position: absolute;
18		top: -9999px;
19		left: -9999px;
20	}
21	
22	tr { border: 1px solid #ccc; }
23	
24	td { 
25		/* Behave  like a "row" */
26		border: none;
27		border-bottom: 1px solid #eee; 
28		position: relative;
29		padding-left: 50%; 
30	}
31	
32	td:before { 
33		/* Now like a table header */
34		position: absolute;
35		/* Top/left values mimic padding */
36		top: 6px;
37		left: 6px;
38		width: 45%; 
39		padding-right: 10px; 
40		white-space: nowrap;
41	}
42	
43	/*
44	Label the data
45	*/
46	td:nth-of-type(1):before { content: "First Name"; }
47	td:nth-of-type(2):before { content: "Last Name"; }
48	td:nth-of-type(3):before { content: "Job Title"; }
49	td:nth-of-type(4):before { content: "Favorite Color"; }
50	td:nth-of-type(5):before { content: "Wars of Trek?"; }
51	td:nth-of-type(6):before { content: "Secret Alias"; }
52	td:nth-of-type(7):before { content: "Date of Birth"; }
53	td:nth-of-type(8):before { content: "Dream Vacation City"; }
54	td:nth-of-type(9):before { content: "GPA"; }
55	td:nth-of-type(10):before { content: "Arbitrary Data"; }
56}

1<table>
2	<thead>
3	<tr>
4		<th>First Name</th>
5		<th>Last Name</th>
6		<th>Job Title</th>
7	</tr>
8	</thead>
9	<tbody>
10	<tr>
11		<td>James</td>
12		<td>Matman</td>
13		<td>Chief Sandwich Eater</td>
14	</tr>
15	<tr>
16		<td>The</td>
17		<td>Tick</td>
18		<td>Crimefighter Sorta</td>
19	</tr>
20	</tbody>
21</table>

1/* Responsive*/ 
2
3
4/* 992px - 1200px */ 
5@media screen and (max-width: 1200px) {
6	
7}
8
9
10/* 768px - 992px */
11@media screen and (max-width: 992px) {
12	
13} 
14
15
16/* 576px - 768px */ 
17@media screen and (max-width: 768px) {
18	
19}
20
21
22/* 0 - 576px */ 
23@media screen and (max-width: 576px) {
24	
25}