I'm working on a table, styled with tailwind CSS which contains a number of records based on a records count filter. A typical record on this table looks like
When I increase the number of records to 500, the reference ID and Account Name columns of the table expand. You can check the gif for more info.
Here's the code for the table
<table className="overflow-x-auto w-full border-separate space-y-9">
<thead className="rounded-lg text-sm text-white bg-c-purple-100 w-full">
<tr>
<th className="p-4">Client ID</th>
<th className="p-4">Reference ID</th>
<th className="p-4">Account name</th>
<th className="p-4">Bank</th>
<th className="p-4">Account Number</th>
<th className="p-4">Amount</th>
<th className="p-4">Country</th>
<th className="p-4">Date</th>
<th className="p-4">Email</th>
<th className="p-4">Status</th>
</tr>
</thead>
<tbody className="border-separate text-xs">
{values.map((val) => {
return (
<tr>
<td className="p-2 h-14 text-center text-c-purple-200">some-id</td>
<td className="p-2 h-14 text-center text-c-purple-200">some-ref</td>
<td className="p-2 h-14 text-center text-c-purple-200">some-name</td>
<td className="p-2 h-14 text-center text-c-purple-200">-</td>
<td className="p-2 h-14 text-center text-c-purple-200">some-account</td>
<td className="p-2 h-14 text-center text-c-purple-200">some-amount</td>
<td className="p-2 h-14 text-center text-c-purple-200">-</td>
<td className="p-2 h-14 text-center text-c-purple-200">some-date</td>
<td className="p-2 h-14 text-center text-c-purple-200">some-email</td>
<StatusTag status="cleared" />
</tr>
);
})}
</tbody>
</table>
How do I prevent this table from expanding when I increase the number of records to 500?