CSS Responsive Table

css-responsive-table.css

table {
	/* remove if moving header */	
	display: block;
	overflow: auto;
	/* end */
	margin: 0 0 1.5em;
	width: 100%;
	background-color: #fff;
	border: 1px solid #000;
	border-bottom: none;
}
thead {
	tr {
		background-color: #fff;
	}
}
th {
	font-weight: bold;
	line-height: 1;
}
tbody {
	tr{
		&:nth-child(odd){
			background-color: #ccc;
		}
	}
}
tr {}
td {}
th,td {
	border-bottom: 1px solid #000;
	border-collapse: collapse;
	padding: 1em;
}

/* responsive with headers on the left */
@media only screen and (max-width: 40em){
	
	table {
		display: block;
		position: relative;
	}
	thead {
		display: block;
		float: left;
		width: 30%;
		tr {
			display: block;
		}
	}
	th {
		display: block;
		min-height: 6rem;
		word-wrap: break-word;
		word-break: hyphenate;
	}
	tbody {
		display: block;
		width: auto;
		position: relative;
		overflow-x: auto;
		white-space: nowrap;
		tr {
			display: inline-block;
			vertical-align: top;
		}
	}
	td {
		display: block;
		min-height: 6rem;
		width: auto;
	}
}