Here is my problem: I need my table to have a) a border around only the table body and b) this border needs to be rounded. Their border is there, but I cannot seem to get it rounded - can anyone help? I've tried just adding "rounded" in various places and a lot more, but nothing seems to work.
<table className="w-full border-collapse text-left">
<thead>
<tr className="">
<th>Display</th>
<th>Identifier</th>
<th>Invested</th>
<th>Development</th>
<th>Value</th>
<th className="w-10"></th>
</tr>
</thead>
<tbody className="border-solid rounded">
<tr className="border-solid rounded ">
<td className="">
<ToggleChecked />
</td>
<td>My Portfolio</td>
<td>$101.348,98</td>
<td className="text-[#5FCD8A]">
+3.02%
<br />
$50.600,05
</td>
<td>$120,560.34</td>
<td className="w-10">MORE</td>
</tr>
</tbody>
</table>
You could consider using a box-shadow
to "fake" the border:
<script src="https://cdn.tailwindcss.com"></script>
<table class="w-full border-collapse text-left">
<thead>
<tr class="">
<th>Display</th>
<th>Identifier</th>
<th>Invested</th>
<th>Development</th>
<th>Value</th>
<th className="w-10"></th>
</tr>
</thead>
<tbody class="rounded shadow-[0_0_0_1px_theme(borderColor.DEFAULT)]">
<tr class="">
<td class="">
<ToggleChecked />
</td>
<td>My Portfolio</td>
<td>$101.348,98</td>
<td class="text-[#5FCD8A]">
+3.02%
<br />
$50.600,05
</td>
<td>$120,560.34</td>
<td class="w-10">MORE</td>
</tr>
</tbody>
</table>