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;
	}

		tbody tr {
			margin: .2em 0;
			padding-left: 4em;
		}
		
		tr:not(:first-child) {
			background: -moz-element(#header) no-repeat;
			background: element(#header) 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;
		white-space: nowrap;
	}

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

dabblet.html

<table>
	<thead id="header">
		<tr><th>Name</th>
		<th>Age</th>
		<th>Color</th>
		<th>Sex</th>
		<th>Alive?</th>
	</tr></thead>
	<tbody>
		<tr>
			<td>Adam Catlace</td>
			<td>4</td>
			<td>White &amp; 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":"css"}