JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<div class="box">
		<table>
			<tr>
				<td>Column 1</td>
				<td>Column 2</td>
				<td>Column 3</td>
				<td>Column 4</td>
				<td>Column 5</td>
				<td>Column 6</td>
				<td>Column 7</td>
				<td>Column 8</td>
				<td>Column 9</td>
				<td>Column 10</td>
				<td>Column 11</td>
				<td>Column 12</td>
				<td>Column 13</td>
				<td>Column 14</td>
				<td>Column 15</td>
				<td>Column 16</td>
			</tr>
		</table>
	</div>
</div>

CSS

.wrapper {
	display: flex; max-width: 300px; width: 100%; border: 1px solid red;
}
.box {
	margin-bottom: 30px; overflow-x: auto; padding: 20px 0; border-right: solid 20px rgba(0, 0, 0, 0); border-left: solid 20px rgba(0, 0, 0, 0);
}