Automatic pretty tables for Bootstrap 3

semantic-tables.less

/*

This is inspired by the "Using Bootstrap the Right (Semantic) Way" article
https://www.ostraining.com/blog/coding/bootstrap-right-way/

Every time I added a table to a page, I was always adding bootstrap classes to it, like so:

   <table class="table table-bordered table-striped">

This LESS file automatically gives all tables the styles from these classes. 

From now on, for a table with borders, padding, and alternating row colors, just use:

   <table></table>

Also, I could never remember whether the correct class for a tigher, more compact table
with less padding was `table-condensed` or `table-compact`, so I added the style table.compact
which adds on the `table-condensed` styles. To make a compact/condensed table (with all of 
the other styles above as well) just use:

    <table class="compact"></table>

To make the table responsive (automatically scrolling on mobile devices), add the class responsive:

    <table class="responsive"></table>

If you want a table that does not have these styles, just give it the class `unstyled`:

    <table class="unstyled"></table>

To use, just include this less file when compiling your css.

*/

table {
    .table;
    .table-bordered;
    .table-striped;
}

table.compact {
    .table-condensed;
}

table.responsive {
    .table-responsive;
}

table.unstyled {
    width: auto;
    max-width: none;
    margin-bottom: 0;
    // Restores styles for cells
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                padding: 1px;
                padding: initial;
                line-height: normal;
                vertical-align: middle;
                vertical-align: initial;
                border-top: 0;
            }
        }
    }
    
    // turns off stripes
    > tbody > tr:nth-of-type(odd) {
        background-color: rgba(0,0,0,0);
        background-color: transparent;
        background-color: inherit;
        background-color: initial;
    }

    // Removes bottom align for column headings
    > thead > tr > th {
        vertical-align: middle;
        vertical-align: initial;
        border-bottom: 0;
    }

    // Remove top border from thead by default
    > caption + thead,
    > colgroup + thead,
    > thead:first-child {
        > tr:first-child {
            > th,
            > td {
                border-top: 0;
            }
        }
    }
    // Account for multiple tbody instances
    > tbody + tbody {
        border-top: 0;
    }
    border: 0;
    border: initial;
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                border: 0;
                border: initial;
            }
        }
    }
    > thead > tr {
        > th,
        > td {
            border-bottom-width: 0;
            border-bottom-width: initial;
        }
    }
}