JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Report">

		<div class="pageA4Portrait">
			<div class="subpageA4Portrait">
				<table style="width: 100%; color: #4E95F4; font-size: medium">
				<tr>
				<td align="left" style="width: 92%; font-size: 24px"><strong>Ueberschrift 1</strong></td>
				<td align="right" style="width: 8%"><strong>26.01.2016</strong></td>
				</tr>
				<tr>
				<td align="left"><strong>Ueberschrift 2</strong></td>
				</tr>
				<tr>
				<td align="left"><strong>Bewerter Name: Newer tear Test</strong></td>
				</tr>
				</table>
				
				
		<table class="sortierbar" >
		<thead>
		<tr>

		<th class="sortierbar vorsortiert+" valign="bottom" align="left" style="width:10%"><div><strong>Kandidaten</strong></div></th>
		<th class="sortierbar" style="width: 5%;"><div class="verticalTableHeader"><strong>Brezen</strong></div></th>
		<th class="sortierbar" style="width: 5%;"><div class="verticalTableHeader"><strong>Semmelweis</strong></div></th>
		<th class="sortierbar" style="width: 5%;"><div class="verticalTableHeader"><strong>Brotwirken</strong></div></th>
		<th class="sortierbar" style="width: 5%;"><div class="verticalTableHeader"><strong>Durchschnitt</strong></div></th>
		<th class="sortierbar" style="width: 5%;"><div class="verticalTableHeader"><strong>Durchschnitt</strong></div></th>
		<th class="sortierbar" style="width: 5%;"><div class="verticalTableHeader"><strong>Durchschnitt</strong></div></th>
		<th class="sortierbar" style="width: 5%; color: red; font-weight: bold;"><div class="verticalTableHeader"><strong>Durchschnitt</strong></div></th>
	
		</tr>
		</thead>
		<tbody>
		
		<tr>

		<td align="left" >01 - Mario Lung</td>
		<td align="center"  >1</td>
		<td align="center"  >2</td>
		<td align="center"  >3</td>
		<td align="center"  >6</td>
		<td align="center"  >6</td>
		<td align="center"  >6</td>
		<td align="center" style="color: red; font-weight: bold;">6</td>
		
		</tr>
		<tr>
		
		<td align="left" style="height: 25px">02 - Hannes Payer</td>
		<td align="center"...

CSS

body { width: 100%; height: 100%; margin: 0; padding: 0; }
    .pageA4Landscape { width: 297mm; min-height: 210mm; padding: 5mm; margin: 5mm auto; }
	.subpageA4Landscape { padding: 0cm; height: 210mm; width: 297mm;}
	
	.pageA4Portrait { width: 210mm; min-height: 297mm; padding: 5mm; margin: 5mm auto; }
    .subpageA4Portrait { padding: 0cm; height: 297mm; width: 210mm; }
    .footer {clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em;}
    
  	table.sortierbar { table-layout: fixed; white-space:nowrap; padding:1px; background: white; border:white 1px solid; font-size: medium; width:100% }
	.sortierbar td { height: 25px; padding:1px; border:#4e95f4 1px solid; }
	.sortierbar th { background: white; vertical-align: bottom; color:black; padding:1px; font-size: medium; }
	.sortierbar tr:nth-child(odd) {background: #b8d1f3; font-size: medium;}
	.sortierbar tr:nth-child(even) {background: #dae5f4; font-size: medium;}
	
    div.verticalTableHeader {
    	white-space:nowrap;
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    
    	
	}
	
	div.verticalTableHeader:before {
		
    	content:'';
     	padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
     	display:inline-block;
     	vertical-align: middle;
    
	}