Responsive Table (Pure CSS)

by. Tetangga-sebelah.com

by Rian .N Herdian

HTML

<table class="responsive">
	<thead>
	<tr>
		<th>Nama</th>
		<th>E-mail</th>
		<th>Phone</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Rian Nurherdian</td>
		<td>[email protected]</td>
		<td>089618885066</td>
	</tr>
	<tr>
		<td>Dadang Geje</td>
		<td>[email protected]</td>
		<td>089123456789</td>
	</tr>
	<tr>
		<td>Rahmat Geje</td>
		<td>[email protected]</td>
		<td>080123456789</td>
	</tr>
	</tbody>
</table>

CSS

*, *:before, *:after {
  word-wrap:break-word;
}
table.responsive { 
  width: 100%; 
  border-collapse: collapse; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size:14px;
  color:#464646;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #f2f2f2; 
}
th { 
  background: #464646; 
  color: #fff; 
  font-weight: 500; 
}
td, th { 
  padding: 10px; 
  border: 1px solid rgba(0,0,0,.1); 
  text-align: left; 
}

@media (max-width:768px) {
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	thead tr { 
    /* HIDDEN */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid rgba(0,0,0,.1); 
		position: relative;
		padding-left: calc(30% + 40px); 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 0;
		width: 30%;
    padding:5px 10px;
    border-radius:0 0 5px 0;
    border:1px solid rgba(0,0,0,.1);
    box-shadow:0 2px 0 rgba(0,0,0,.1);
    font-size:80%;
    font-weight:500;
    letter-spacing:.5px;
    background:#464646;
    color:#fff;
	}
  tr { 
  border:1px solid rgba(0,0,0,.1);
  margin:10px 0;
  }
  tr:nth-of-type(odd) {
  }
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Nama"; }
	td:nth-of-type(2):before { content: "E-mail"; }
	td:nth-of-type(3):before { content: "Phone"; }
}