Responsive Table

by jorgeluis

HTML

<h1>
Responsive Table - Jorge-style!
</h1>

<table class="responsive-table">
	<thead>
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Job Title</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td data-label="First Name">Etta</td>
		<td data-label="Last Name">James</td>
		<td data-label="Job Title">ALL THE HoFS</td>
	</tr>
	<tr>
		<td data-label="First Name">Prince</td>
		<td data-label="Last Name">Nelson</td>
		<td data-label="Job Title">Legend</td>
	</tr>
	<tr>
		<td data-label="First Name">Nice "And"</td>
		<td data-label="Last Name">Simple</td>
		<td data-label="Job Title">Even works if something like this happened. Where the data had to flow to multiple lines. Overall this is nice trick that requires very few lines of css.</td>
	</tr>
	</tbody>
</table>

CSS

table { 
  width: 100%; 
  border-collapse: collapse; 
}
td, th { 
  padding: 10px; 
  text-align: left; 
}
th { 
  font-weight: bold; 
}

/* 2-col layout for pocket screens */
@media screen and (max-width: 600px) {

  thead {
    display: none;
  }
  .responsive-table, 
  .responsive-table tbody,
  .responsive-table tr {
    display: block;
  }
  tr + tr {
    border-top: solid 1px #ddd;
  }
  td {
    display: table;
    width: 100%;
  }
  td::before {
    display: table-cell;
    padding: 10px;
    width: 30%;
    content: attr(data-label);
    font-weight: bold;
  }

}