JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table id="myTable"></table>

CSS

td {
   /*  border: 1px solid steelblue; */
	/* font: 14px Calibri; */
	border-radius:3px;
	padding:0px;
}

.textNormalMiddle{
	font: 14px Calibri;
	text-align: center;
}

.title{
	background: #EDF5FA; 
}

.titleMain{
	background: #D8E5EE; 
	border:1px solid steelblue;
}

.dataInput{
	background: #F5F8FA;
	
}


.fixed{
    
    position:fixed;
}

JavaScript

var GUIWidth = (window.innerWidth-20)-50; //-GUIWidth of svg
var GUIHeight = window.innerHeight-100; //-GUIHeight of svg


function createTable(){
	
	var table = document.getElementById("myTable");
	table.width = GUIWidth;
	//table.className = "textNormalMiddle";
    var row = table.insertRow(0);
	var row1 = table.insertRow(1);
	var row2 = table.insertRow(2);
	var row3 = table.insertRow(3);
	var row4 = table.insertRow(4);
	var row5 = table.insertRow(5);
	var row6 = table.insertRow(6);
	var row7 = table.insertRow(7);
	var row8 = table.insertRow(8);
	var row9 = table.insertRow(9);
	var row10 = table.insertRow(10);
	var row11 = table.insertRow(11);
	var row12 = table.insertRow(12);
	
	//var column = row2.insertColumn(0);
	
	var cell0a = row.insertCell(0);
	cell0a.colSpan = 16;
	cell0a.className = "textNormalMiddle titleMain";
	cell0a.innerHTML = "TITLE";
	
    var cell1a = row1.insertCell(0);
	cell1a.colSpan = 16;
	cell1a.className = "textNormalMiddle titleMain";
	cell1a.innerHTML = "TABLE";
	
    var cell2a = row2.insertCell(0);
	cell2a.colSpan = 8;
	cell2a.className = "textNormalMiddle title";
	cell2a.innerHTML = "NAME";
	
	var cell2b = row2.insertCell(1);
	cell2b.colSpan = 8;
	cell2b.className = "textNormalMiddle dataInput";
	cell2b.innerHTML = "FRED";
	
	var cell3a = row3.insertCell(0);
	cell3a.colSpan = 8;
	cell3a.className = "textNormalMiddle title";
	cell3a.innerHTML = "AGE";
	
	var cell3a = row3.insertCell(1);
	cell3a.colSpan = 8;
	cell3a.className = "textNormalMiddle dataInput";
	cell3a.innerHTML = 16;
	
	var cell4a = row4.insertCell(0);
	cell4a.colSpan = 8;
	cell4a.className = "textNormalMiddle titleMain";
	cell4a.innerHTML = "COUNTRY";
	
	var cell4b = row4.insertCell(1);
	cell4b.colSpan = 8;
	cell4b.className = "textNormalMiddle titleMain";
	cell4b.innerHTML = "SPORTS";
	
	var cell5a = row5.insertCell(0);
	cell5a.colSpan = 4;
	cell5a.className = "textNormalMiddle title";
	cell5a.innerHTML = "UK";
	
	var cell5b = row5.insertCell(1);
	cell5b.colSpan =...