Vertical table header test

dabblet.css

/* Vertical table header test */
th {
  vertical-align: bottom;
}

th.vertical, td.vertical {
  display: inline-block;
  text-align: center;
  width: 1em; /* px tuts auch nicht*/
}
th.vertical {
  background: #008000;
  height: 200px;
  position: relative;
}

th.vertical span {
  background: #0f0;
  left: 0;
  position: absolute;
  top: -19px;
  transform: rotate(90deg);
  transform-origin: bottom left;
  width: 202px;
}

dabblet.html

<table>
	<tr>
		<th class="vertical"><span>Langer Inhalt 1</span></th>
		<th class="vertical"><span>Langer Inhalt 2</span></th>
		<th>foo</th>
		<th class="vertical"><span>Langer Inhalt 3</span></th>
		<th class="vertical"><span>Langer Inhalt 4</span></th>
		<th>bar</th>
	</tr>
	<tr>
		<td class="vertical">1</td>
		<td class="vertical">2</td>
		<td>lorem ipsum</td>
		<td class="vertical">3</td>
		<td class="vertical">4</td>
		<td>lorem ipsum</td>
	</tr>
</table>

settings.json

{"view":"split","prefixfree":"1","page":"css"}