b.css

	@import "compass/css3";

// Default options for table style
$table-breakpoint: 480px;
$table-background-color: #FFF;
$table-text-color: #024457;
$table-outer-border: 1px solid #167F92;
$table-cell-border: 1px solid #D9E4E6;

// Extra options for table style (parse these arguments when including your mixin)
$table-border-radius: 10px;
$table-highlight-color: #EAF3F3;
$table-header-background-color: #167F92;
$table-header-text-color: #FFF;
$table-header-border: 1px solid #FFF;

// The Responstable mixin

@mixin responstable(
	$breakpoint: $table-breakpoint,
	$background-color: $table-background-color,
	$text-color: $table-text-color,
	$outer-border: $table-outer-border,
	$cell-border: $table-cell-border,
	$border-radius: none,
	$highlight-color: none,
	$header-background-color: $table-background-color,
	$header-text-color: $table-text-color,
	$header-border: $table-cell-border) {

	.responstable {
		margin: 1em 0;
		width: 100%;
		overflow: hidden; 
		background: $background-color;
		color: $text-color;
		border-radius: $border-radius;
		border: $outer-border;

		tr {
			border: $cell-border; 
			&:nth-child(odd) { // highlight the odd rows with a color
				background-color: $highlight-color;
			} 
		}

		th {
			display: none; // hide all the table header for mobile
			border: $header-border;
			background-color: $header-background-color;
			color: $header-text-color;
			padding: 1em; 
			&:first-child { // show the first table header for mobile
				display: table-cell;
				text-align: center;
			}
			&:nth-child(2) { // show the second table header but replace the content with the data-th from the markup for mobile
				display: table-cell;
				span {display:none;}
				&:after {content:attr(data-th);}
			}
			@media (min-width: $breakpoint) {
				&:nth-child(2) { // hide the data-th and show the normal header for tablet and desktop
					span {display: block;}
					&:after {display: none;}
				}
			}
		}

		td {
			display: block; // display the table data as one block for mobile
			word-wrap: break-word;
			max-width: 7em;
			&:first-child { 
				display: table-cell; // display the first one as a table cell (radio button) for mobile
				text-align: center;
				border-right: $cell-border;
			}
			@media (min-width: $breakpoint) {
				border: $cell-border;
			}
		}

		th, td {
			text-align: left;
			margin: .5em 1em; 
			@media (min-width: $breakpoint) {
				display: table-cell; // show the table as a normal table for tablet and desktop
				padding: 1em;
			}
		} 
	} 
}

// Include the mixin (with extra options as overrides)

@include responstable(
	$border-radius: $table-border-radius,
	$highlight-color: $table-highlight-color,
	$header-background-color: $table-header-background-color,
	$header-text-color: $table-header-text-color,
	$header-border: $table-header-border);

// General styles

body {
	padding: 0 2em;
	font-family: Arial, sans-serif;
	color: #024457;
	background: #f2f2f2;
}

h1 {
	font-family: Verdana;
	font-weight: normal;
	color: #024457;
	span {color: #167F92;}
}