dziudek · April 1, 2012 09:51
diff --git a/dabblet.css b/dabblet.css
 /**
 * Simple solution for long tables in responsive design
 */

 table:before {
 	content: "Scroll horizontally to view the whole table";
 	height: 14px;
 	width: 100%;
 	display: block;
 	font-size: 10px;
 	margin-top: -10px;
 	font-family: Arial, sans-serif;
 }

 table {
 	width: 300px;
 	background: #eee;
 	overflow: scroll;
 	display: block;
 	padding: 10px 0 20px 0; /* padding for the scrollbars and the top message */
 }

 table tr {
 	width: 500px;
 	display: table;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <table>
 	<thead>
 		<tr>
 			<th>Lorem</th>
 			<th>Ipsum</th>
 			<th>Dolor</th>
 			<th>Sit</th>
 			<th>Amet</th>
 		</tr>
 	</thead>
 	<tbody>
 		<tr>
 			<td>1</td>
 			<td>2</td>
 			<td>3</td>
 			<td>4</td>
 			<td>5</td>
 		</tr>
 	</tbody>
 </table>
diff --git a/settings.json b/settings.json
 {"view":"split","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Simple solution for long tables in responsive design
	*/

	table:before {
	content: "Scroll horizontally to view the whole table";
	height: 14px;
	width: 100%;
	display: block;
	font-size: 10px;
	margin-top: -10px;
	font-family: Arial, sans-serif;
	}

	table {
	width: 300px;
	background: #eee;
	overflow: scroll;
	display: block;
	padding: 10px 0 20px 0; /* padding for the scrollbars and the top message */
	}

	table tr {
	width: 500px;
	display: table;
	}
	<!-- content to be placed inside <body>…</body> -->
	<table>
	<thead>
	<tr>
	<th>Lorem</th>
	<th>Ipsum</th>
	<th>Dolor</th>
	<th>Sit</th>
	<th>Amet</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
	<td>5</td>
	</tr>
	</tbody>
	</table>