A .table-striped inside a .card ignores border-radius on odd rows #126

Activity

1. casually-creative

   added

   bugSomething isn't workingSomething isn't working

   on May 29, 2022
2. casually-creative commented on May 29, 2022

   

   casually-creative

   on May 29, 2022

   Last edited by casually-creative

   Author

   More actions

   Currently fixed it with custom scss:

   .card
   {
       & > table,
       & > .table
       {
           overflow: hidden;
           border-radius: inherit;
       }
   }

   Looking for an official fix in the kit though. I'd imagine the overflow fix is not something everyone would prefer.
3. paullaros

   self-assigned this

   on May 29, 2022
4. paullaros commented on Aug 9, 2022

   

   paullaros

   on Aug 9, 2022

   Contributor

   More actions

   Thanks! We came up with the following solution, which will be part of the next version of AdminKit:

   .card > .table > tbody {
     tr:last-child td:first-child,
     tr:last-child th:first-child {
       border-bottom-left-radius: $card-border-radius;
     }
     tr:last-child td:last-child,
     tr:last-child th:last-child {
       border-bottom-right-radius: $card-border-radius;
     }
   }

   👍React with 👍1Reacted by Creative
5. paullaros

   closed this as completedon Aug 9, 2022
6. paullaros

   added a commit that references this issue on Aug 10, 2022

   Fix for striped cards in tables (#126)

   f9bc0d6