JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">

<table class="tabwid">
	<tbody>
		<tr>
			<th>HHH HHH HHH HHH</th>
			<th>HHH HHH HHH HHH</th>
			<th>HHH HHH HHH HHH</th>
			<th>HHH HHH HHH HHH</th>
			<th>HHH HHH HHH HHH</th>
			<th>HHH HHH HHH HHH</th>
			<th>HHH HHH HHH HHH</th>
			<th>HHH HHH HHH HHH</th>
			<th>HHH HHH HHH HHH</th>
			<th>HHH HHH HHH HHH</th>
		</tr>
		<tr>
			<td>AAA AAA AAA AAA</td>
			<td>AAA AAA AAA AAA</td>
			<td>AAA AAA AAA AAA</td>
			<td>AAA AAA AAA AAA</td>
			<td>AAA AAA AAA AAA</td>
			<td>AAA AAA AAA AAA</td>
			<td>AAA AAA AAA AAA</td>
			<td>AAA AAA AAA AAA</td>
			<td>AAA AAA AAA AAA</td>
			<td>AAA AAA AAA AAA</td>
		</tr>
        		<tr>
			<td>BBB BBB BBB BBB</td>
			<td>BBB BBB BBB BBB</td>
			<td>BBB BBB BBB BBB</td>
			<td>BBB BBB BBB BBB</td>
			<td>BBB BBB BBB BBB</td>
			<td>BBB BBB BBB BBB</td>
			<td>BBB BBB BBB BBB</td>
			<td>BBB BBB BBB BBB</td>
			<td>BBB BBB BBB BBB</td>
			<td>BBB BBB BBB BBB</td>
		</tr>
        		<tr>
			<td>CCC CCC CCC CCC</td>
			<td>CCC CCC CCC CCC</td>
			<td>CCC CCC CCC CCC</td>
			<td>CCC CCC CCC CCC</td>
			<td>CCC CCC CCC CCC</td>
			<td>CCC CCC CCC CCC</td>
			<td>CCC CCC CCC CCC</td>
			<td>CCC CCC CCC CCC</td>
			<td>CCC CCC CCC CCC</td>
			<td>CCC CCC CCC CCC</td>
		</tr>
        		<tr>
			<td>DDD DDD DDD DDD</td>
			<td>DDD DDD DDD DDD</td>
			<td>DDD DDD DDD DDD</td>
			<td>DDD DDD DDD DDD</td>
			<td>DDD DDD DDD DDD</td>
			<td>DDD DDD DDD DDD</td>
			<td>DDD DDD DDD DDD</td>
			<td>DDD DDD DDD DDD</td>
			<td>DDD DDD DDD DDD</td>
			<td>DDD DDD DDD DDD</td>
		</tr>
	</tbody>
</table>

</div>

CSS

.table{ overflow-x:auto; line-height:1.4em;}
table{ border-collapse:collapse; display:block; background:#ffaaaa; }
tbody{ background:#aaffaa; }
th{ text-align:center; vertical-align:top; background:#222; color:#eee; padding:16px 8px; font-weight:normal; }
td{ padding:8px; border:1px solid #aaa; }

JavaScript

var table = document.getElementsByClassName("tabwid");
for (var i = 0; i < table.length; i++) {
	var j = 0,
		row;
	tabwid = table[i].offsetWidth;
	row = table[i].rows;
	while (row[j++]) {
		var hei = row.offsetHeight;
		while (tabwid < 4000) {
			tabwid += 500;
			table[i].style.width = tabwid + 'px';
			if (row.offsetHeight == hei) {
				table[i].style.width = tabwid - 500 + 'px';
				break;
			}
		}
	}
}