Untitled

dabblet.css

table {
	width: 100%;
	border: 1px solid #000;
	border-collapse: collapse;
}
table th,
table td {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	padding: 10px;
	text-align: left;
	font: normal 14px Arial, sans-serif;
}
table th {
	font-weight: bold;
}
.mobile-heading {
	display: none;
}
@media screen and (max-width: 680px) {
	thead {
		display: none;
	}
	table td {
		display: block;
		overflow: hidden;
		border-left: 0;
	}
	.mobile-content {
		display: block;
		margin: 0 0 0 90px;
	}
	.mobile-heading {
		display: block;
		width: 80px;
		float: left;
		font-weight: bold;
	}
}

dabblet.html

<table>    <thead>        <tr>            <th>Heading 1</th>            <th>Heading 2</th>            <th>Heading 3</th>            <th>Heading 4</th>            <th>Heading 5</th>            <th>Heading 6</th>            <th>Heading 7</th>            <th>Heading 8</th>        </tr>    </thead>    <tbody>    <tr>        <td><span class="mobile-heading">Heading 1:</span><span class="mobile-content">Lorem...<br>Text 1</span></td>        <td><span class="mobile-heading">Heading 2:</span><span class="mobile-content">Lorem...<br>Text 2</span></td>        <td><span class="mobile-heading">Heading 3:</span><span class="mobile-content">Lorem...<br>Text 3</span></td>        <td><span class="mobile-heading">Heading 4:</span><span class="mobile-content">Lorem...<br>Text 4</span></td>        <td><span class="mobile-heading">Heading 5:</span><span class="mobile-content">Lorem...<br>Text 5</span></td>        <td><span class="mobile-heading">Heading 6:</span><span class="mobile-content">Lorem...<br>Text 6</span></td>        <td><span class="mobile-heading">Heading 7:</span><span class="mobile-content">Lorem...<br>Text 7</span></td>        <td><span class="mobile-heading">Heading 8:</span><span class="mobile-content">Lorem...<br>Text 8</span></td>    </tr>    <tr>        <td><span class="mobile-heading">Heading 1:</span><span class="mobile-content">Lorem...<br>Text 1</span></td>        <td><span class="mobile-heading">Heading 2:</span><span class="mobile-content">Lorem...<br>Text 2</span></td>        <td><span class="mobile-heading">Heading 3:</span><span class="mobile-content">Lorem...<br>Text 3</span></td>        <td><span class="mobile-heading">Heading 4:</span><span class="mobile-content">Lorem...<br>Text 4</span></td>        <td><span class="mobile-heading">Heading 5:</span><span class="mobile-content">Lorem...<br>Text 5</span></td>        <td><span class="mobile-heading">Heading 6:</span><span class="mobile-content">Lorem...<br>Text 6</span></td>        <td><span class="mobile-heading">Heading 7:</span><span class="mobile-content">Lorem...<br>Text 7</span></td>        <td><span class="mobile-heading">Heading 8:</span><span class="mobile-content">Lorem...<br>Text 8</span></td>    </tr>    <tr>        <td><span class="mobile-heading">Heading 1:</span><span class="mobile-content">Lorem...<br>Text 1</span></td>        <td><span class="mobile-heading">Heading 2:</span><span class="mobile-content">Lorem...<br>Text 2</span></td>        <td><span class="mobile-heading">Heading 3:</span><span class="mobile-content">Lorem...<br>Text 3</span></td>        <td><span class="mobile-heading">Heading 4:</span><span class="mobile-content">Lorem...<br>Text 4</span></td>        <td><span class="mobile-heading">Heading 5:</span><span class="mobile-content">Lorem...<br>Text 5</span></td>        <td><span class="mobile-heading">Heading 6:</span><span class="mobile-content">Lorem...<br>Text 6</span></td>        <td><span class="mobile-heading">Heading 7:</span><span class="mobile-content">Lorem...<br>Text 7</span></td>        <td><span class="mobile-heading">Heading 8:</span><span class="mobile-content">Lorem...<br>Text 8</span></td>    </tr>    </tbody></table>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}