I've been attempting to use the margin-bottom property on my table in order to separate the rows, but it doesn't seem to have any effect. I then tried using flex, which did work, but the table rows did not inherit the width and I had to specify a specific width. Is there another method to achieve the separation of table rows?
Here is the code snippet using flex:
<table className="w-full text-sm text-left lg:table-fixed table-fixed">
<thead className="text-sm text-white text-opacity-50 font-normal ">
...
</thead>
{() => (
<tbody className={classNames({ ' text-white text-sm flex flex-col': true })}>
{dataT.map(vt => {
return <VaultTransactionsRow key={vt.id} {...vt} />
})}
</tbody>
)}
</table>
Here is the table I created using flex
Here is the table I created where the margin-bottom has no effect