JSFiddle - React, Tailwind, and code Playground

by Mac65

HTML

<h1>Pretty Table with pure JavaScript</h1>
<p>Just put an empty table above and name the id with praefix 'noscroll-{mytable}' where {mytable} is the id of the table below.<br/><br/></p>

<div style="width:600px;">
<table id='noscroll-TestTable' >
<thead>
<tr></tr>
</thead>
</table>
</div>
<div style="width:600px; max-height: 300px; overflow: auto;">
<table id='TestTable' style='max-height: 180px; overflow-y: auto;'>
<thead>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
		<th>Header 3</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>And Repeat 1</td>
		<td>And Repeat 2</td>
		<td>And Repeat 3</td>
	</tr>
	<tr>
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>And Repeat 1</td>
		<td>And Repeat 2</td>
		<td>And Repeat 3</td>
	</tr>
	<tr>
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>And Repeat 1</td>
		<td>And Repeat 2</td>
		<td>And Repeat 3</td>
	</tr>
	<tr>
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content...

CSS

body {
	text-align: left;
	}
table{
	width: 100%;
	border: 0;
	border-spacing: 0;
	padding: 0;
	clear: both;
	}
table th{
    background-color:#456789;
	display: inline-block;
	float: left;
	padding: 0;
}

table td{
    background-color:#999;
}

JavaScript

NoScrollTables();

	/* Set all tables, where a "noscroll-"+id exists to no scroll */
	function NoScrollTables()
	{
	var list = document.getElementsByTagName('table');
	for (var i = 0; i < list.length; i++)
		{
		if (document.getElementById('noscroll-' + list[i].id) != null) NoScrollTable(list[i].id);
		}
	};

	/* Initialize a single table to no-scroll */
	function NoScrollTable(TabId)
	{
	var headerwidth=[];	// Storage for width of main table
	var maintab = document.getElementById(TabId);
	var noscroll = document.getElementById('noscroll-'+TabId);
	var restwidth = noscroll.offsetWidth;
	for (var i = 0; i < maintab.rows[1].cells.length; i++) headerwidth[i] = maintab.rows[1].cells[i].clientWidth;
	var content = maintab.rows[0].innerHTML;
	noscroll.rows[0].innerHTML = content;
	maintab.rows[0].innerHTML='';
	for (i = 0; i < maintab.rows[1].cells.length; i++)	// Set width for both tables identically
		{
		noscroll.rows[0].cells[i].width = headerwidth[i];
		maintab.rows[1].cells[i].width = headerwidth[i];
		restwidth = restwidth - headerwidth[i];
		}
	i--;
	noscroll.rows[0].cells[i].width = parseInt(noscroll.rows[0].cells[i].width) + parseInt(restwidth); // Expand last cell over possible scrollbar
	return;
	};