Collapsable table headers

by cchana

HTML

<table>
	<tr>
		<th>ID</th>
		<th>Summary</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Vestibulum eros eros, porttitor ac urna at</td>
		<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Vestibulum eros eros, porttitor ac urna at</td>
		<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Vestibulum eros eros, porttitor ac urna at</td>
		<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
	</tr>
</table>
	
<table>
	<thead>
		<tr>
			<th>ID</th>
			<th>Summary</th>
			<th>Description</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Vestibulum eros eros, porttitor ac urna at</td>
			<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Vestibulum eros eros, porttitor ac urna at</td>
			<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Vestibulum eros eros, porttitor ac urna at</td>
			<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
		</tr>
	</tbody>
</table>

CSS

table {
    border-collapse: collapse;
    width: 100%;
}
table tr th {
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

table thead,
table thead + tbody tr:nth-child(even),
table tbody:first-child tr:nth-child(odd) {
    background: rgba(0,0,0,0.05);
}

@media screen and (max-width: 700px) {
	
	
	table {
		border-collapse: collapse;
		margin-bottom: 50px;
		width: 100%;
	}

	table td {
		display: block;
		width: 100%;
	}

	/* Use flexbox to remove the headers from their columns */
	table thead tr,
	table tbody:first-child tr:first-child {
		display: flex;
		text-align: left;
	}
	
	/* Remove the right border from all but the last cell */
	table thead tr th:not(:last-child),
	table tr:first-child th:not(:last-child) {
		border-right: 0;
	}

	/* Let the last cell take up all of the available space, bringing all the content next to each other */
	table thead tr th:last-child,
	table tr:first-child th:last-child {
		flex: 1;
	}
	
	/* Remove any LEFT padding from all except the first cell */
	table thead tr th:not(:first-child),
	table tr:first-child th:not(:first-child) {
		padding-left: 0;
	}

	/* Remove any RIGHT padding from all except the last cell */
	table thead tr th:not(:last-child),
	table tr:first-child th:not(:last-child) {
		padding-right: 0;
	}

	/* Add a comma and a space before to all but the first cell */
	table thead tr th:not(:first-child):before,
	table tr:first-child th:not(:first-child):before {
		content: ',\00a0';
	}

	/* Add ' & ' before the last cell */
	table thead tr th:last-child:before,
	table tr:first-child th:last-child:before {
		content: '\00a0\0026\00a0';
	}

}