JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<div class="wrapper1">
	<div class="div1"></div>
</div>
<div class="wrapper2">
	<div class="div2">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
					<td>table cell</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

CSS

.wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; }
.wrapper1 { height: 20px; }
.wrapper2 {}
.div1 { height: 20px; }
.div2 { overflow: none; }

JavaScript

$(function () {
    $('.wrapper1').on('scroll', function (e) {
        $('.wrapper2').scrollLeft($('.wrapper1').scrollLeft());
    }); 
    $('.wrapper2').on('scroll', function (e) {
        $('.wrapper1').scrollLeft($('.wrapper2').scrollLeft());
    });
});
$(window).on('load', function (e) {
    $('.div1').width($('table').width());
    $('.div2').width($('table').width());
});