JSFiddle - React, Tailwind, and code Playground

by Oeslei Kuhn

HTML

<div class="table-responsive">
	<table class="table">
		<thead>
			<tr>
				<th>Coluna 1</th>
				<th>Coluna 2</th>
				<th>Coluna 3</th>
				<th>Coluna 4</th>
				<th>Coluna 5</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>coluna 1</td>
				<td>coluna 2</td>
				<td>coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3</td>
				<td>coluna 4</td>
				<td>coluna 5</td>
			</tr>
			<tr>
				<td>coluna 1</td>
				<td>coluna 2</td>
				<td>coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3 coluna 3</td>
				<td>coluna 4</td>
				<td>coluna 5</td>
			</tr>
		</tbody>
	</table>
</div>

CSS

html,
body {
	margin: 0;
	padding: 0;
}

.table-responsive {
	border: 1px solid #ddd;
	margin: 20px;
	overflow: auto;
}

.table {
	width: 100%;
}

.table th {
	white-space: nowrap;
}

.table th,
.table td {
	border: 1px solid #ddd;
	padding: 6px 10px;
	text-align: left;
}