Responsive tables with element()

dabblet.css

/**
 * Responsive tables with element()
 * Pros: No markup changes, works with normal table markup, no content duplication
 * Cons: element() is only implemented in Firefox :(
 */

@media (max-width: 600px) {
	table, tr, td, th, thead, tbody {
		display: block;
	}

	thead {
		float: left;
		margin-left: -99in;
	}

		tbody tr {
			margin: .2em 0;
			padding-left: 4em;
		}
		
		td::before {
		    content: '';
		    float: left;
		    margin-left: -4em;
		    height: 2em;
		    width: 4em; 
		}
		
		td:nth-child(1)::before {
			background: -moz-element(#header0) no-repeat;
			background: element(#header0) no-repeat;
		}
		td:nth-child(2)::before {
			background: -moz-element(#header1) no-repeat;
			background: element(#header1) no-repeat;
		}
		td:nth-child(3)::before {
			background: -moz-element(#header2) no-repeat;
			background: element(#header2) no-repeat;
		}
		td:nth-child(4)::before {
			background: -moz-element(#header3) no-repeat;
			background: element(#header3) no-repeat;
		}
		td:nth-child(5)::before {
			background: -moz-element(#header4) no-repeat;
			background: element(#header4) no-repeat;
		}

		th {
			text-align: left;
		}
		
		td:not(:first-child) {
			border-top: none;
		}
}

/* Just styling after this */
body {
	font: 150%/1.6 Helvetica Neue, sans-serif;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

	td, th {
		padding: 0 .3em;
	}

	td {
		border: 1px solid rgba(0,0,0,.1);
	}

dabblet.html

<table>
	<thead>
		<tr><th id="header0">Name</th>
		<th id="header1">Age</th>
		<th id="header2">Color</th>
		<th id="header3">Sex</th>
		<th id="header4">Alive?</th>
	</tr></thead>
	<tbody>
		<tr>
			<td>Adam Catlace</td>
			<td>4</td>
			<td>Mostly White, but with several large spots of Orange</td>
			<td>Male</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>Vector</td>
			<td>12</td>
			<td>Blue</td>
			<td>Male</td>
			<td>N</td>
		</tr>
		<tr>
			<td>Çiki</td>
			<td>1</td>
			<td>Gray</td>
			<td>Female</td>
			<td>Y</td>
		</tr>
	</tbody>
</table>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}