How to apply a border radius to React table tfoot with 3 children while avoiding display block displacement?

user19625670 0
Viewed 25

I have a React table where the code looks like this:

    <tfoot class="rounded-t-lg border bg-inpay-black-haze-100 text-sm" style="background:red">
      <tr>
        <td class="px-4 text-center"></td>
        <td class="px-4 text-center">1000</td>
        <td class="px-4 text-center"></td>
      </tr>
    </tfoot>

If I add display block to the tfoot the border radius will be applied but the 1000 in the is going to move to the left and I do not want that. without display block & with display block

So basically I want 1000 in the same position (in the middle) but also apply the border radius. Is there a way to do this mantainin the same positions ?

PS: it was supposed to be border bottom not top

tailwind-css reactjs css
1 Answers

You cannot apply border-radius to: table, tfoot, or tr, only in td.

I would suggest making some changes inside your tfoot

First, remove those two unused td's and add colspan="3" in the remain td.

<tr>
  <td class="px-4 text-center">1000</td>
</tr>

Then, remove the rounded-b-lg class from the tfoot and added it to the td.

You can check a simple demo here: https://play.tailwindcss.com/QplVcNFj9y?layout=horizontal

cainelli0
Related