multicolumn table

dabblet.css

/**
 * multicolumn table
 */

	th,
	td
	{
		width: 4em;
		text-align: left;
		padding: 0;
		margin: 0;
		border: 0 none;
	}

@media (min-width: 26em)
{
	table
	{
		display: block;
		max-width: 54em;
	}

	thead
	{
		display: block;
		position: relative;
	}

	thead th::before
	{
		content: attr(data-content);
		position: absolute;
	}

	thead th:nth-child(1)::before
	{
		left: 50%;
	}

	thead th:nth-child(2)::before
	{
		left: calc(50% + 4em);
	}

	thead th:nth-child(3)::before
	{
		left: calc(50% + 8em);
	}

	tbody
	{
		display: block;
		column-count: 2;
		column-gap: 0;
	}

	tr
	{
		display: block;
		overflow: hidden;
	}

	th,
	td
	{
		display: block;
		float: left;
	}
}


@media (min-width: 40em)
{
	thead th:nth-child(1)::before
	{
		left: 33.3333%;
	}

	thead th:nth-child(2)::before
	{
		left: calc(33.3333% + 4em);
	}

	thead th:nth-child(3)::before
	{
		left: calc(33.3333% + 8em);
	}

	thead th::after
	{
		content: attr(data-content);
		position: absolute;
	}

	thead th:nth-child(1)::after
	{
		left: 66.6667%;
	}

	thead th:nth-child(2)::after
	{
		left: calc(66.6667% + 4em);
	}

	thead th:nth-child(3)::after
	{
		left: calc(66.6667% + 8em);
	}

	tbody
	{
		column-count: 3;
	}
}

dabblet.html

<table>
	<thead>
		<tr>
			<th data-content="col1">col1</th>
			<th data-content="col2">col2</th>
			<th data-content="col3">col3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1.1</td>
			<td>1.2</td>
			<td>1.3</td>
		</tr>
		<tr>
			<td>2.1</td>
			<td>2.2</td>
			<td>2.3</td>
		</tr>
		<tr>
			<td>3.1</td>
			<td>3.2</td>
			<td>3.3</td>
		</tr>
		<tr>
			<td>4.1</td>
			<td>4.2</td>
			<td>4.3</td>
		</tr>
		<tr>
			<td>5.1</td>
			<td>5.2</td>
			<td>5.3</td>
		</tr>
		<tr>
			<td>6.1</td>
			<td>6.2</td>
			<td>6.3</td>
		</tr>
		<tr>
			<td>7.1</td>
			<td>7.2</td>
			<td>7.3</td>
		</tr>
		<tr>
			<td>8.1</td>
			<td>8.2</td>
			<td>8.3</td>
		</tr>
		<tr>
			<td>9.1</td>
			<td>9.2</td>
			<td>9.3</td>
		</tr>
	</tbody>
</table>

dabblet.js

// alert('Hello world!');

settings.json

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