//
// kremalicious3
// --------------
// Tables
//


table
    border-collapse: collapse
    border-spacing: 0
    width: 100%
    max-width: 100%
    background-color: transparent
    margin-bottom: $spacer
    border-bottom: 1px solid #cfd9e1

td
    vertical-align: top

th,
td
    padding: .7em .3em
    text-align: left
    vertical-align: top
    border-top: 1px solid #cfd9e1

th
    @extend .bold

thead th
    vertical-align: bottom

table tbody + tbody
    border-top: 2px solid #cfd9e1

table tbody tr:nth-child(odd) td,
table tbody tr:nth-child(odd) th
    background-color: rgba(255,255,255,.2)

table tbody tr:hover td,
table tbody tr:hover th
    background-color: #f5f5f5


.table-responsive
    overflow-x: auto
    min-height: 0.01% // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)

    @media (max-width: $screen-xs-min)
        width: 100%
        margin-bottom: ($spacer * 0.75)
        overflow-y: hidden
        -webkit-overflow-scrolling: touch
        -ms-overflow-style: -ms-autohiding-scrollbar

        // Tighten up spacing
        > table
            margin-bottom: 0

            // Ensure the content doesn't wrap
            > thead,
            > tbody,
            > tfoot
                > tr
                    > th,
                    > td
                        white-space: nowrap
                        padding: .5em .2em