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

February 2017
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
      1 2 3 4
             
WK 1 6 7 8 9 10 11
        Orientation Orientation  
WK 2 13 14 15 16 17 18
  Brazing Brazing Sales Brazing Brazing  
WK 3 20 21 22 23 24 25
  Brazing Brazing Sales Brazing Brazing  
WK 4 27 28        
  Refrigerant Charging Refrigerant Charging        
March 2017
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
WK 4     1 2 3 4
      Sales Refrigerant Charging Refrigerant Charging  
WK 5 6 7 8 9 10 11
  Refrigerant Charging Refrigerant Charging Sales Refrigerant Charging Refrigerant Charging  
WK 6 13 14 15 16 17 18
  Refrigerant Charging Refrigerant Charging Sales Refrigerant Charging Refrigerant Charging  
WK 7 20 21 22 23 24 25
  System Wiring System Wiring Sales System Wiring System Wiring  
WK 8 27 28 29 30 31  
  System Wiring System Wiring Sales System Wiring System Wiring  
WK 1 Feb 9, 2017 Orientation
WK 1 Feb 10, 2017. Orientation
WK 2 Feb 13, 2017 Brazing
WK 2 Feb 14, 2017 Brazing
WK 2 Feb 15, 2017 Sales
WK 2 Feb 16, 2017 Brazing
WK 2 Feb 17, 2017 Brazing
WK 3 Feb 20, 2017 Brazing
WK 3 Feb 21, 2017 Brazing
WK 3 Feb 22, 2017 Sales
WK 3 Feb 23, 2017 Brazing
WK 3 Feb 24, 2017 Brazing
WK 4 Feb 27, 2017 Refrigerant Charging
WK 4 Feb 28, 2017 Refrigerant Charging
WK 4 Mar 1, 2017 Sales
WK 4 Mar 2, 2017. Refrigerant Charging
WK 4 Mar 3, 2017 Refrigerant Charging
WK 5 Mar 6, 2017 Refrigerant Charging
WK 5 Mar 7, 2017 Refrigerant Charging
WK 5 Mar 8, 2017 Sales
WK 5 Mar 9, 2017 Refrigerant Charging
WK 5 Mar 10, 2017 Refrigerant Charging
WK 6 Mar 13, 2017 Refrigerant Charging
WK 6 Mar 14, 2017 Refrigerant Charging
WK 6 Mar 15, 2017 Sales
WK 6 Mar 16, 2017 Refrigerant Charging
WK 6 Mar 17, 2017 Refrigerant Charging
WK 7 Mar 20, 2017 System Wiring
WK 7 Mar 21, 2017 System Wiring
WK 7 Mar 22, 2017 Sales
WK 7 Mar 23, 2017 System Wiring
WK 7 Mar 24, 2017 System Wiring
WK 8 Mar 27, 2017 System Wiring
WK 8 Mar 28, 2017 System Wiring
WK 8 Mar 29, 2017 Sales
WK 8 Mar 30, 2017 System Wiring
WK 8 Mar 31, 2017 System Wiring