Bootstrap 5.3 Cards & Tables: Seamless SCSS Solution.md

Bootstrap 5.3 Cards & Tables: Seamless SCSS Solution

Welcome to the ultimate SCSS solution designed to address and fix common styling issues when using tables within Bootstrap 5.3 cards. This fix aims to enhance the visual harmony and integrity of tables embedded in cards, providing a seamless and aesthetically pleasing user interface. Here's what this Gist resolves:

Issues Fixed

1. Double Borders Issue: Eliminates the redundant bottom border of tables within cards, ensuring a clean and polished look.
2. Weird Bottom Margin: Removes the awkward bottom margin from tables in cards for a tighter, more integrated appearance.
3. Inconsistent Padding: Standardizes padding on both the left and right sides of tables within cards, ensuring uniformity and balance.
4. Missing Borders Between Elements: Introduces borders between card elements where tables are used, enhancing clarity and visual separation.

How to Use

SCSS Snippet

To apply these fixes, simply include the provided SCSS snippet in your project's main SCSS file or wherever you manage your custom styles. Ensure that your project is already utilizing Bootstrap 5.3 to guarantee compatibility.

@import "bootstrap/scss/bootstrap";

/*
 * Bootstrap 5.3 Cards & Tables: Seamless SCSS Solution
 * https://gist.github.com/tinyoverflow/999c7797ce51582ea4481b2501e7ad20
 */
.card {
    &:has(> .table:last-child),
    &:has(> [class^="table-responsive"]:last-child .table){
        overflow: hidden;
    }

    > .table,
    > [class^="table-responsive"] > .table {
        /*
         * Adjusts the padding of the first and last table column to match the card
         * padding. Otherwise tables in cards will look off when combining them
         * with other card elements.
         */
        > :not(caption) > * {
            > *:first-child {
                padding-left: var(--#{$prefix}card-cap-padding-x);
            }

            > *:last-child {
                padding-right: var(--#{$prefix}card-cap-padding-x);
            }
        }

        /*
         * Removes the bottom margin on the table element inside a card, as it is
         * not needed anyway. If it's the last child, a bottom margin adds unwanted
         * spacing. If elements come after it, they have their own spacing applied.
         */
        margin-bottom: 0;
    }

    /*
     * Removes the bottom border of the very last element of a table if the table
     * is the last child of the card. This is done to prevent rendering the
     * border of the card and the border of the table row at the same time.
     */
    > .table:last-child,
    > [class^="table-responsive"]:last-child > .table {
        > :not(caption):last-child > *:last-child > * {
            --#{$prefix}border-width: 0;
        }
    }

    /*
     * Add a border between card elements and tables as there is no visual
     * separation between a card element and a table otherwise.
     */
    > *:has(+ .table),
    > *:has(+ [class^="table-responsive"]) {
        border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
    }
}

HTML Structure

When nesting a table directly inside a .card element, it's crucial to structure your HTML correctly to ensure the styling applies as intended. Below is an example snippet demonstrating how to nest your table:

<div class="card">
  <table class="table">
    <!-- Table content here -->
  </table>
</div>

If you want to have a responsive table, you can even nest the table inside a container with the .table-responsive{-sm|-md|-lg|-xl|-xxl} class applied:

<div class="card">
  <div class="table-responsive">
    <table class="table">
      <!-- Table content here -->
    </table>
  </div>
</div>