Table Style 3

The following is a customization to add table style 3 to any table you wish in your app. 

Step 1

Add the following code to the header section of your app.

<style>
    /* Table Head CSS */
    .table-style-3 .table-wrap>.table {
        border: 1px solid #ddd;
    }

    .table-style-3 table>thead>tr>th {
        border: none;
        font-family: Montserrat-Medium;
        font-size: 12px;
        color: #fff;
        line-height: 1.4;
        text-transform: uppercase;
        background-color: #333333;
        padding-top: 20px;
        padding-bottom: 20px;

    }

    .table-style-3 table>thead>tr>th:hover {
        color: #fff;
        background-color: #484848 !important;
    }

    .table-style-3 .table-actions {
        background-color: #eaf8e6;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
    }

    .table-style-3 .table-actions .pull-left,
    .table-style-3 .table-actions .pull-right {
        padding: 1rem;
    }

    .table-style-3 table,
    .table-style-3 table>thead>tr>th,
    .table-style-3 table>tbody>tr>th,
    .table-style-3 table>tfoot>tr>th,
    .table-style-3 table>thead>tr>td,
    .table-style-3 table>tbody>tr>td,
    .table-style-3 table>tfoot>tr>td {
        border: none;
        vertical-align: middle;
    }

    /* table striped  Css*/
    .table-style-3 table>tbody>tr:nth-child(even) {
        background-color: #eaf8e6;
    }

    .table-style-3 table>tbody>tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .table-style-3 table>tbody>tr>td {
        font-family: Montserrat-Regular;
        font-size: 14px;
        color: #808080;
        line-height: 1.4;
        padding-top: 18px;
        padding-bottom: 14px;
    }

    .table-style-3 table>tbody>tr>td .allow-inline-edit:hover {
        background-color: #57b846;
        color: #000;
    }

    .table-style-3 table>tbody>tr>td .allow-inline-edit:hover:after {
        color: #333333;
    }


    /* Search box */
    .table-style-3 .input-group input.form-control.input-sm.padder {
        border-right: none;
        border: 1px solid #484848;
    }

    .table-style-3 .input-group-btn {
        border: 1px solid #484848;
        background: none;
        border-left: none;
    }

    .table-style-3 .input-group-btn .btn {
        background: none;
        color: #484848;
        padding: 0px 10px;
    }

    .table-style-3 .input-group-btn .btn:focus {
        outline: none;
    }

    .table-style-3 .input-group-btn .btn:active {
        box-shadow: none;
    }

    /* Multi-select checkbox */
    .table-style-3 input[type='checkbox'] {
        margin-top: -30px;
    }

    .table-style-3 input[type='checkbox'] {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeSpeed;
        width: 20px;
        height: 20px;
        margin: 0;
        margin-right: 1px;
        display: block;
        float: left;
        position: relative;
        cursor: pointer;
    }

    .table-style-3 input[type='checkbox']:after {
        content: "";
        vertical-align: middle;
        text-align: center;
        line-height: 20px;
        position: absolute;
        cursor: pointer;
        height: 20px;
        width: 20px;
        left: 0;
        top: 0;
        font-size: 12px;
        -moz-box-shadow: inset 0 1px 1px #3699FF, 0 1px 0 #3699FF;
        border: 1px solid #80808070;
        background: #eaf8e6;

    }

    .table-style-3 input[type='checkbox']:hover:after,
    input[type='checkbox']:checked:hover:after {
        background: #eaf8e6;
        content: '\2714';
        color: #333333;
    }

    .table-style-3 input[type='checkbox']:checked:after {
        background: #eaf8e6;
        content: '\2714';
        color: #333333;
        border: 1px solid #80808070;
    }

    /* Relaod  button */
    .table-style-3 .table-actions .btn-primary {
        background: none;
        color: #2780e3;
        border: 1px solid #2780e3;
    }

    .table-style-3 .table-actions .btn-primary:hover {
        background: #2780e3;
        color: #fff;
        border: 1px solid #2780e3;
    }

    .table-style-3 .table-actions .btn-info {
        background: none;
        color: #9954bb;
        border: 1px solid #9954bb;
    }

    .table-style-3 .table-actions .btn-info:hover {
        background: #9954bb;
        color: #fff;
        border: 1px solid #9954bb;
    }

    .table-style-3 .table-actions .btn-danger {
        background: none;
        color: #ff0039;
        border: 1px solid #ff0039;
    }

    .table-style-3 .table-actions .btn-danger:hover {
        background: #ff0039;
        color: #fff;
        border: 1px solid #ff0039;
    }

    /* edit-delete-detail link Css */
    .table-style-3 a.td-link.td-data-link {
        background: #484848;
        padding: 5px;
        border-radius: 2.4rem;
        text-align: center;
        border: 1px solid #484848;
    }

    .table-style-3 .td-data-link i.fa {
        color: #eaf8e6;
        width: 15px;
        font-size: 10px;
    }

    .table-style-3 .td-data-link:hover {
        background: none !important;
        color: #eaf8e6;
        border: 1px solid #484848;
    }

    .table-style-3 .td-data-link:hover i {
        color: #484848;
    }

    /*===============================================================================*/
    /* table-style-3 */
    /* table striped  Css*/
    .table-style-3 table>tbody>tr:nth-child(even) {
        background-color: #e9faff;
    }

    .table-style-3 table>tbody>tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .table-style-3 .table-actions .pull-left,
    .table-style-4 .table-actions .pull-right {
        padding: 1rem;
    }

    .table-style-3 table,
    .table-style-4 table>thead>tr>th,
    .table-style-4 table>tbody>tr>th,
    .table-style-4 table>tfoot>tr>th,
    .table-style-4 table>thead>tr>td,
    .table-style-4 table>tbody>tr>td,
    .table-style-4 table>tfoot>tr>td {
        border: 1px solid #00293338;
        vertical-align: middle;
    }

    .table-style-3 table>thead>tr>th {
        border: none;
        font-family: Montserrat-Medium;
        font-size: 12px;
        color: #fff;
        line-height: 1.4;
        text-transform: uppercase;
        background-color: #002933;
        padding-top: 20px;
        padding-bottom: 20px;
        letter-spacing: 2px;
    }

    .table-style-3 table>thead>tr>th:hover {
        background-color: #1a3f48 !important;
        color: #fe3e64;
    }

    .table-style-3 .table-actions {
        background-color: #e9faff;
        border: none;
    }

    .table-style-3 table>tbody>tr>td {
        font-family: Montserrat-Regular;
        font-size: 14px;
        color: #808080;
        line-height: 1.4;
        padding-top: 18px;
        padding-bottom: 14px;
    }

    /* Search box */
    .table-style-3 .input-group input.form-control.input-sm.padder {
        border-right: none;
        border: 1px solid #484848a3;
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }

    .table-style-3 .input-group-btn {
        border: 1px solid #484848a3;
        background: none;
        border-left: none;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    .table-style-3 .input-group-btn .btn {
        background: none;
        color: #484848a3;
        padding: 0px 10px;
    }

    .table-style-3 .input-group-btn .btn:focus {
        outline: none;
    }

    .table-style-3 .input-group-btn .btn:active {
        box-shadow: none;
    }


    /* Relaod  button */
    .table-style-3 .table-actions .btn-primary {
        background: none;
        color: #2780e3;
        border: 1px solid #2780e3;
        border-radius: 1rem;
    }

    .table-style-3 .table-actions .btn-primary:hover {
        background: #2780e3;
        color: #fff;
        border: 1px solid #2780e3;
    }

    .table-style-3 .table-actions .btn-info {
        background: none;
        color: #9954bb;
        border: 1px solid #9954bb;
        border-radius: 1rem !important;
    }

    .table-style-3 .table-actions .btn-info:hover {
        background: #9954bb;
        color: #fff;
        border: 1px solid #9954bb;
    }

    .table-style-3 .table-actions .btn-danger {
        background: none;
        color: #ff0039;
        border: 1px solid #ff0039;
        border-radius: 1rem;
    }

    .table-style-3 .table-actions .btn-danger:hover {
        background: #ff0039;
        color: #fff;
        border: 1px solid #ff0039;
    }

    .table-style-3 .table-actions .pull-right .btn.disabled {
        background: #002933;
        color: #e9faff;
        opacity: unset;
    }


    /* Multi-select checkbox */
    .table-style-3 input[type='checkbox'] {
        margin-top: -30px;
    }

    .table-style-3 input[type='checkbox'] {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeSpeed;
        width: 23px;
        height: 0px;
        margin: 0;
        margin-right: 1px;
        display: block;
        float: left;
        position: relative;
        cursor: pointer;
        border-radius: 1rem;
        border: 1px solid red;
        bottom: 10px;
    }

    .table-style-3 input[type='checkbox']:after {
        content: "";
        vertical-align: middle;
        text-align: center;
        line-height: 20px;
        position: absolute;
        cursor: pointer;
        height: 20px;
        width: 20px;
        left: 0;
        top: 0;
        font-size: 12px;
        -moz-box-shadow: inset 0 1px 1px #3699FF, 0 1px 0 #3699FF;
        border: 1px solid #80808070;
        background: #e9faff;
        border-radius: 1rem;

    }

    .table-style-3 input[type='checkbox']:hover:after,
    input[type='checkbox']:checked:hover:after {
        background: #e9faff;
        content: '\2714';
        color: #fe3e64;
    }

    .table-style-3 input[type='checkbox']:checked:after {
        background: #e9faff;
        content: '\2714';
        color: #fe3e64;
        border: 1px solid #80808070;
    }


    /* edit-delete-detail link Css */
    .table-style-3 a.td-link.td-data-link {
        background: #1a3f48;
        padding: 5px;
        text-align: center;
        border: 1px solid #484848;
    }

    .table-style-3 .td-data-link i.fa {
        color: #e9faff;
        width: 15px;
        font-size: 10px;
    }

    .table-style-3 .td-data-link:hover {
        background: none !important;
        color: #eaf8e6;
        border: 1px solid #484848;
    }

    .table-style-3 .td-data-link:hover i {
        color: #fe3e64;
    }
</style>

Step 2

Add "table-style-3" to any table's CSS selector that you wish to change. 

Original Community Post:

UI/UX CSS works - Community Discussions / Getting Started - Tadabase Community