Question 177038 in CSS Question posted in
Some basic documentation can be found here.

Css – 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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    It’s not a tailwind problem. It’s per CSS speficification that border-radius does not work on tbody. You can try to simulate it somehow with some tricks like a box-shadow trick mentioned here: https://stackoverflow.com/a/48814066/2665139

    Just add:

    tbody {
  box-shadow: 0 0 0 1px black;
}

    See also a similar question: Is there a clean way to get borders on a <tbody /> in pure CSS?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search