Tables

This is the code for custom responsive tables.


Sample

NameExtensionTitle
Randal S.105President
Charles D.104Vice President
Michael L.107Director of Engineering Sales
Joel H.129Warehouse Manager
Warehouse133Warehouse
Shipping134Shipping
Aaron H.125Outside Sales
Carl E.116Estimator

HTML

<table class="custom-table">
<tbody>
<tr>
<th>Name</th>
<th>Extension</th>
<th>Title</th>
</tr>
<tr class="odd">
<td>Randal S.</td>
<td>105</td>
<td>President</td>
</tr>
<tr class="even">
<td>Charles D.</td>
<td>104</td>
<td>Vice President</td>
</tr>
<tr class="odd">
<td>Michael L.</td>
<td>107</td>
<td>Director of Engineering Sales</td>
</tr>
<tr class="even">
<td>Joel H.</td>
<td>129</td>
<td>Warehouse Manager</td>
</tr>
<tr class="odd">
<td>Warehouse</td>
<td>133</td>
<td>Warehouse</td>
</tr>
<tr class="even">
<td>Shipping</td>
<td>134</td>
<td>Shipping</td>
</tr>
<tr class="odd">
<td>Aaron H.</td>
<td>125</td>
<td>Outside Sales</td>
</tr>
<tr class="even">
<td>Carl E.</td>
<td>116</td>
<td>Estimator</td>
</tr>
</tbody>
</table>

CSS

/* CUSTOM TABLE
   ================================================== */

table.custom-table {
    font-size: 13px;
    margin: 10px 0;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid #bbb;
}

table.custom-table th {
    border-bottom: 1px solid #1CA76C;
    padding: 12px;
    font-weight: 400;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    background-color: #1CA76C;
    color: #fff;
    white-space: nowrap;
}

table.custom-table td {
    padding: 8px;
    border-top: 1px solid #bbb;
}

table.custom-table tfoot td {
    font-size: 11px;
    background-color: #272727;
    color: #999;
    text-align: center;
    border-top: 1px solid #272727;
    padding: 12px;
}

.odd {
    background: #E9E8E8 !important;
}

.even {
    background: #E0DEDE !important;
}

table.custom-table tbody tr:hover td,table.custom-table tbody tr:hover td a {
    background: #282828;
    color: #fff;
}

table.custom-table {
    cursor: pointer;
}

Example usage: Demo