Tables

This is the code for custom responsive tables.


Sample

Name Extension Title
Randal S. 105 President
Charles D. 104 Vice President
Michael L. 107 Director of Engineering Sales
Joel H. 129 Warehouse Manager
Warehouse 133 Warehouse
Shipping 134 Shipping
Aaron H. 125 Outside Sales
Carl E. 116 Estimator

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