Search code examples
csstailwind-csscss-tables

How can I round the border of my table body?

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>

My code so far

Solution

  • 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>