JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<div class="container">
	<table>
		<thead>
			<tr>
				<th>Column A</th>
				<th>Column B</th>
				<th>Column C</th>
				<th>Column D</th>
				<th>Column E</th>
				<th>Column F</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Row 1 Cell 1</td>
				<td>Row 1 Cell 2</td>
				<td>Row 1 Cell 3</td>
				<td>Row 1 Cell 4</td>
				<td>Row 1 Cell 5</td>
				<td>Row 1 Cell 6</td>
			</tr>
			<tr>
				<td>Row 2 Cell 1</td>
				<td>Row 2 Cell 2</td>
				<td>Row 2 Cell 3</td>
				<td>Row 2 Cell 4</td>
				<td>Row 2 Cell 5</td>
				<td>Row 2 Cell 6</td>
			</tr>
			<tr>
				<td>Row 3 Cell 1</td>
				<td>Row 3 Cell 2</td>
				<td>Row 3 Cell 3</td>
				<td>Row 3 Cell 4</td>
				<td>Row 3 Cell 5</td>
				<td>Row 3 Cell 6</td>
			</tr>
		</tbody>
	</table>
</div>

CSS

.container {
	width: 30em;
	overflow-x: auto;
	white-space: nowrap;
}

	table, th, td {
		border: 1px solid black;
	}
	
	th, td {
		padding: .5em 1em;
	}