bootstrap-vue/es/components/table/table.css

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

/* Add support for fixed layout table */
table.b-table.b-table-fixed {
    table-layout: fixed;
}

/* Busy table styling */
table.b-table[aria-busy='false'] {
    opacity: 1;
}
table.b-table[aria-busy='true'] {
    opacity: 0.6;
}

/* Sort styling */
table.b-table > thead > tr > th,
table.b-table > tfoot > tr > th {
    position: relative;
}
table.b-table > thead > tr > th.sorting,
table.b-table > tfoot > tr > th.sorting {
    padding-right: 1.5em;
    cursor: pointer;
}
table.b-table > thead > tr > th.sorting::before,
table.b-table > thead > tr > th.sorting::after,
table.b-table > tfoot > tr > th.sorting::before,
table.b-table > tfoot > tr > th.sorting::after {
    position: absolute;
    bottom: 0;
    display: block;
    opacity: 0.4;
    padding-bottom: inherit;
    font-size: inherit;
    line-height: 180%;
}
table.b-table > thead > tr > th.sorting::before,
table.b-table > tfoot > tr > th.sorting::before {
    right: 0.75em;
    content: '\2191';
}
table.b-table > thead > tr > th.sorting::after,
table.b-table > tfoot > tr > th.sorting::after {
    right: 0.25em;
    content: '\2193';
}
table.b-table > thead > tr > th.sorting_asc::after,
table.b-table > thead > tr > th.sorting_desc::before,
table.b-table > tfoot > tr > th.sorting_asc::after,
table.b-table > tfoot > tr > th.sorting_desc::before {
    opacity: 1;
}

/* Stacked table layout */
/* Derived from http://blog.adrianroselli.com/2017/11/a-responsive-accessible-table.html */
/* Always stacked */
table.b-table.b-table-stacked {
    width: 100%;
}
table.b-table.b-table-stacked,
table.b-table.b-table-stacked > tbody,
table.b-table.b-table-stacked > tbody > tr,
table.b-table.b-table-stacked > tbody > tr > td,
table.b-table.b-table-stacked > tbody > tr > th,
table.b-table.b-table-stacked > caption {
    display: block;
}

/* Hide stuff we can't deal with, or shouldn't show */
table.b-table.b-table-stacked > thead,
table.b-table.b-table-stacked > tfoot,
table.b-table.b-table-stacked > tbody > tr.b-table-top-row,
table.b-table.b-table-stacked > tbody > tr.b-table-bottom-row {
    display: none;
}

/* inter-row top border */
table.b-table.b-table-stacked > tbody > tr > :first-child {
    border-top-width: 0.4rem;
}

/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
table.b-table.b-table-stacked > tbody > tr > [data-label] {
    display: grid;
    grid-template-columns: 40% auto;
    grid-gap: 0.25rem 1rem;
}

/* generate row cell "heading" */
table.b-table.b-table-stacked > tbody > tr > [data-label]::before {
    content: attr(data-label);
    display: inline;
    text-align: right;
    overflow-wrap: break-word;
    font-weight: bold;
    font-style: normal;
}

@media all and (max-width: 575.99px) {
    /* Under SM */
    table.b-table.b-table-stacked-sm {
        width: 100%;
    }
    table.b-table.b-table-stacked-sm,
    table.b-table.b-table-stacked-sm > tbody,
    table.b-table.b-table-stacked-sm > tbody > tr,
    table.b-table.b-table-stacked-sm > tbody > tr > td,
    table.b-table.b-table-stacked-sm > tbody > tr > th,
    table.b-table.b-table-stacked-sm > caption {
        display: block;
    }
    /* hide stuff we can't deal with, or shouldn't show */
    table.b-table.b-table-stacked-sm > thead,
    table.b-table.b-table-stacked-sm > tfoot,
    table.b-table.b-table-stacked-sm > tbody > tr.b-table-top-row,
    table.b-table.b-table-stacked-sm > tbody > tr.b-table-bottom-row {
        display: none;
    }
    /* inter-row top border */
    table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
        border-top-width: 0.4rem;
    }
    /* convert TD/TH contents to "cells". Caveat: child elements become cells! */
    table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
        display: grid;
        grid-template-columns: 40% auto;
        grid-gap: 0.25rem 1rem;
    }
    /* generate row cell "heading" */
    table.b-table.b-table-stacked-sm > tbody > tr > [data-label]::before {
        content: attr(data-label);
        display: inline;
        text-align: right;
        overflow-wrap: break-word;
        font-weight: bold;
        font-style: normal;
    }
}

@media all and (max-width: 767.99px) {
    /* under MD  */
    table.b-table.b-table-stacked-md {
        width: 100%;
    }
    table.b-table.b-table-stacked-md,
    table.b-table.b-table-stacked-md > tbody,
    table.b-table.b-table-stacked-md > tbody > tr,
    table.b-table.b-table-stacked-md > tbody > tr > td,
    table.b-table.b-table-stacked-md > tbody > tr > th,
    table.b-table.b-table-stacked-md > caption {
        display: block;
    }
    /* hide stuff we can't deal with, or shouldn't show */
    table.b-table.b-table-stacked-md > thead,
    table.b-table.b-table-stacked-md > tfoot,
    table.b-table.b-table-stacked-md > tbody > tr.b-table-top-row,
    table.b-table.b-table-stacked-md > tbody > tr.b-table-bottom-row {
        display: none;
    }
    /* inter-row top border */
    table.b-table.b-table-stacked-md > tbody > tr > :first-child {
        border-top-width: 0.4rem;
    }
    /* convert TD/TH contents to "cells". Caveat: child elements become cells! */
    table.b-table.b-table-stacked-md > tbody > tr > [data-label] {
        display: grid;
        grid-template-columns: 40% auto;
        grid-gap: 0.25rem 1rem;
    }
    /* generate row cell "heading" */
    table.b-table.b-table-stacked-md > tbody > tr > [data-label]::before {
        content: attr(data-label);
        display: inline;
        text-align: right;
        overflow-wrap: break-word;
        font-weight: bold;
        font-style: normal;
    }
}

@media all and (max-width: 991.99px) {
    /* under LG  */
    table.b-table.b-table-stacked-lg {
        width: 100%;
    }
    table.b-table.b-table-stacked-lg,
    table.b-table.b-table-stacked-lg > tbody,
    table.b-table.b-table-stacked-lg > tbody > tr,
    table.b-table.b-table-stacked-lg > tbody > tr > td,
    table.b-table.b-table-stacked-lg > tbody > tr > th,
    table.b-table.b-table-stacked-lg > caption {
        display: block;
    }
    /* hide stuff we can't deal with, or shouldn't show */
    table.b-table.b-table-stacked-lg > thead,
    table.b-table.b-table-stacked-lg > tfoot,
    table.b-table.b-table-stacked-lg > tbody > tr.b-table-top-row,
    table.b-table.b-table-stacked-lg > tbody > tr.b-table-bottom-row {
        display: none;
    }
    /* inter-row top border */
    table.b-table.b-table-stacked-lg > tbody > tr > :first-child {
        border-top-width: 0.4rem;
    }
    /* convert TD/TH contents to "cells". Caveat: child elements become cells! */
    table.b-table.b-table-stacked-lg > tbody > tr > [data-label] {
        display: grid;
        grid-template-columns: 40% auto;
        grid-gap: 0.25rem 1rem;
    }
    /* generate row cell "heading" */
    table.b-table.b-table-stacked-lg > tbody > tr > [data-label]::before {
        content: attr(data-label);
        display: inline;
        text-align: right;
        overflow-wrap: break-word;
        font-weight: bold;
        font-style: normal;
    }
}

@media all and (max-width: 1199.99px) {
    /* under XL  */
    table.b-table.b-table-stacked-xl {
        width: 100%;
    }
    table.b-table.b-table-stacked-xl,
    table.b-table.b-table-stacked-xl > tbody,
    table.b-table.b-table-stacked-xl > tbody > tr,
    table.b-table.b-table-stacked-xl > tbody > tr > td,
    table.b-table.b-table-stacked-xl > tbody > tr > th,
    table.b-table.b-table-stacked-xl > caption {
        display: block;
    }
    /* hide stuff we can't deal with, or shouldn't show */
    table.b-table.b-table-stacked-xl > thead,
    table.b-table.b-table-stacked-xl > tfoot,
    table.b-table.b-table-stacked-xl > tbody > tr.b-table-top-row,
    table.b-table.b-table-stacked-xl > tbody > tr.b-table-bottom-row {
        display: none;
    }
    /* inter-row top border */
    table.b-table.b-table-stacked-xl > tbody > tr > :first-child {
        border-top-width: 0.4rem;
    }
    /* convert TD/TH contents to "cells". Caveat: child elements become cells! */
    table.b-table.b-table-stacked-xl > tbody > tr > [data-label] {
        display: grid;
        grid-template-columns: 40% auto;
        grid-gap: 0.25rem 1rem;
    }
    /* generate row cell "heading" */
    table.b-table.b-table-stacked-xl > tbody > tr > [data-label]::before {
        content: attr(data-label);
        display: inline;
        text-align: right;
        overflow-wrap: break-word;
        font-weight: bold;
        font-style: normal;
    }
}

/* Details row styling */
table.b-table > tbody > tr.b-table-details > td {
    border-top: none;
}