Table CSS for Collaborizm

cizm-table.css

/* 
Classes: cizm-table cizm-table-striped cizm-table-bordered cizm-table-hover cizm-table-condensed

cizm-table = main
cizm-table-striped = alternate coloured rows
cizm-table-bordered = table border
cizm-table-hover = interactive hover
cizm-table-condensed = lesser cell paddiing
*/

table 
{
    background-color: #fff;
}

.cizm-table {
    width: 100%; 
    max-width: 100%; 
    margin-bottom: 20px;
    border-collapse: collapse;
}

.cizm-table > thead > tr > th 
{
    padding: 8px; 
    line-height: 1.4285714;
    border-top: 1px solid #ddd; 
}

.cizm-table > thead > tr > td, 
.cizm-table > tbody > tr > th, 
.cizm-table > tbody > tr > td, 
.cizm-table > tfoot > tr > th, 
.cizm-table > tfoot > tr > td 
{
    padding: 8px; 
    line-height: 1.4285714; 
    vertical-align: top; 
    border-top: 1px solid #ddd; 
    text-align: left; 
}

.cizm-table > thead > tr > th 
{
    vertical-align: bottom; 
    border-bottom: 2px solid #ddd;
    font-weight: bold;
}

.cizm-table > caption + thead > tr:first-child > th, 
.cizm-table > caption + thead > tr:first-child > td, 
.cizm-table > colgroup + thead > tr:first-child > th, 
.cizm-table > colgroup + thead > tr:first-child > td, 
.cizm-table > thead:first-child > tr:first-child > th, 
.cizm-table > thead:first-child > tr:first-child > td 
{
    border-top: 0;
}

.cizm-table > tbody + tbody 
{
    border-top: 2px solid #ddd;
}


/* Condensed */
.cizm-table-condensed > thead > tr > th, 
.cizm-table-condensed > thead > tr > td, 
.cizm-table-condensed > tbody > tr > th, 
.cizm-table-condensed > tbody > tr > td, 
.cizm-table-condensed > tfoot > tr > th, 
.cizm-table-condensed > tfoot > tr > td 
{
    padding: 5px;
}



/* Bordered */
.cizm-table-bordered, 
.cizm-table-bordered > thead > tr > th, 
.cizm-table-bordered > thead > tr > td, 
.cizm-table-bordered > tbody > tr > th, 
.cizm-table-bordered > tbody > tr > td, 
.cizm-table-bordered > tfoot > tr > th, 
.cizm-table-bordered > tfoot > tr > td 
{
    border: 1px solid #ddd;
}

.cizm-table-bordered > thead > tr > th, 
.cizm-table-bordered > thead > tr > td 
{
    border-bottom-width: 2px;
}


/* Striped */
.cizm-table-striped > tbody > tr:nth-child(odd) > td, 
.cizm-table-striped > tbody > tr:nth-child(odd) > th 
{
    background-color: #f9f9f9;
}


/* Hover */
.cizm-table-hover > tbody > tr:hover > td, 
.cizm-table-hover > tbody > tr:hover > th 
{
    background-color: #f5f5f5;
}


/*
    TODO: Additional rules, Bootstrap and jQuery datatables.
*/


/* Special col */
table col[class *= "col-"] 
{
    position: static; 
    float: none; 
    display: table-column;
}

table td[class *= "col-"], 
table th[class *= "col-"] 
{
    position: static; 
    float: none; 
    display: table-cell;
}


/* Active */
.cizm-table > thead > tr > td.active, 
.cizm-table > thead > tr > th.active, 
.cizm-table > thead > tr.active > td, 
.cizm-table > thead > tr.active > th, 
.cizm-table > tbody > tr > td.active, 
.cizm-table > tbody > tr > th.active, 
.cizm-table > tbody > tr.active > td, 
.cizm-table > tbody > tr.active > th, 
.cizm-table > tfoot > tr > td.active, 
.cizm-table > tfoot > tr > th.active, 
.cizm-table > tfoot > tr.active > td, 
.cizm-table > tfoot > tr.active > th 
{
    background-color: #f5f5f5;
}

.cizm-table-hover > tbody > tr > td.active:hover, 
.cizm-table-hover > tbody > tr > th.active:hover, 
.cizm-table-hover > tbody > tr.active:hover > td, 
.cizm-table-hover > tbody > tr:hover > .active, 
.cizm-table-hover > tbody > tr.active:hover > th 
{
    background-color: #e8e8e8;
}


/* Success */
.cizm-table > thead > tr > td.success, 
.cizm-table > thead > tr > th.success, 
.cizm-table > thead > tr.success > td, 
.cizm-table > thead > tr.success > th, 
.cizm-table > tbody > tr > td.success, 
.cizm-table > tbody > tr > th.success, 
.cizm-table > tbody > tr.success > td, 
.cizm-table > tbody > tr.success > th, 
.cizm-table > tfoot > tr > td.success, 
.cizm-table > tfoot > tr > th.success, 
.cizm-table > tfoot > tr.success > td, 
.cizm-table > tfoot > tr.success > th 
{
    background-color: #dff0d8;
}

.cizm-table-hover > tbody > tr > td.success:hover, 
.cizm-table-hover > tbody > tr > th.success:hover, 
.cizm-table-hover > tbody > tr.success:hover > td, 
.cizm-table-hover > tbody > tr:hover > .success, 
.cizm-table-hover > tbody > tr.success:hover > th 
{
    background-color: #d0e9c6;
}


/* Info */
.cizm-table > thead > tr > td.info, 
.cizm-table > thead > tr > th.info, 
.cizm-table > thead > tr.info > td, 
.cizm-table > thead > tr.info > th, 
.cizm-table > tbody > tr > td.info, 
.cizm-table > tbody > tr > th.info, 
.cizm-table > tbody > tr.info > td, 
.cizm-table > tbody > tr.info > th, 
.cizm-table > tfoot > tr > td.info, 
.cizm-table > tfoot > tr > th.info, 
.cizm-table > tfoot > tr.info > td, 
.cizm-table > tfoot > tr.info > th 
{
    background-color: #d9edf7;
}

.cizm-table-hover > tbody > tr > td.info:hover, 
.cizm-table-hover > tbody > tr > th.info:hover, 
.cizm-table-hover > tbody > tr.info:hover > td, 
.cizm-table-hover > tbody > tr:hover > .info, 
.cizm-table-hover > tbody > tr.info:hover > th 
{
    background-color: #c4e3f3;
}


/* Warning */
.cizm-table > thead > tr > td.warning, 
.cizm-table > thead > tr > th.warning, 
.cizm-table > thead > tr.warning > td, 
.cizm-table > thead > tr.warning > th, 
.cizm-table > tbody > tr > td.warning, 
.cizm-table > tbody > tr > th.warning, 
.cizm-table > tbody > tr.warning > td, 
.cizm-table > tbody > tr.warning > th, 
.cizm-table > tfoot > tr > td.warning, 
.cizm-table > tfoot > tr > th.warning, 
.cizm-table > tfoot > tr.warning > td, 
.cizm-table > tfoot > tr.warning > th 
{
    background-color: #fcf8e3;
}

.cizm-table-hover > tbody > tr > td.warning:hover, 
.cizm-table-hover > tbody > tr > th.warning:hover, 
.cizm-table-hover > tbody > tr.warning:hover > td, 
.cizm-table-hover > tbody > tr:hover > .warning, 
.cizm-table-hover > tbody > tr.warning:hover > th 
{
    background-color: #faf2cc;
}


/* Danger */
.cizm-table > thead > tr > td.danger, 
.cizm-table > thead > tr > th.danger, 
.cizm-table > thead > tr.danger > td, 
.cizm-table > thead > tr.danger > th, 
.cizm-table > tbody > tr > td.danger, 
.cizm-table > tbody > tr > th.danger, 
.cizm-table > tbody > tr.danger > td, 
.cizm-table > tbody > tr.danger > th, 
.cizm-table > tfoot > tr > td.danger, 
.cizm-table > tfoot > tr > th.danger, 
.cizm-table > tfoot > tr.danger > td, 
.cizm-table > tfoot > tr.danger > th 
{
    background-color: #f2dede;
}

.cizm-table-hover > tbody > tr > td.danger:hover, 
.cizm-table-hover > tbody > tr > th.danger:hover, 
.cizm-table-hover > tbody > tr.danger:hover > td, 
.cizm-table-hover > tbody > tr:hover > .danger, 
.cizm-table-hover > tbody > tr.danger:hover > th 
{
    background-color: #ebcccc;
}