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>