FooTable - jQuery plugin for responsive HTML tables

Group your column headers together

Group 1 | Group 2 | Group 3
--- | --- | ---
| ID | Date 1 | Dates 2, 3, 4 | Date 5 | Note | Section
| 2 | 03/01/2014 | 10/01/2016 | 01/01/2014 | 23/01/2014 | 18/01/2014 | 000-003 | INT
| 3 | 03/01/2015 | 10/01/2015 | 02/01/2014 | 24/01/2014 | 18/01/2015 | 000-001 | INT
| 1 | 03/01/2016 | 10/01/2014 | 03/01/2014 | 22/01/2014 | 18/01/2016 | 000-002 | INT

#### Header Groups

It is possible to have advanced table header setups where your column headers are grouped. The groupings will also be inside the detail rows.

    <table class="table footable">
        <thead>
        <tr class="footable-group-row">
            <th data-group="group1" colspan="3">Group 1</th>
            <th data-group="group2" colspan="3">Group 2</th>
            <th data-group="group3" colspan="3">Group 3</th>
        </tr>
        <tr>
            <th data-group="group1" data-ignore="true"><input type="checkbox"/></th>
            <th data-group="group1">ID</th>
            <th data-group="group1" data-hide="phone,tablet">Date 1</th>
            <th data-group="group2" data-hide="phone" colspan="3" data-names="Date 2,Date 3,Date 4">Dates 2, 3, 4</th>
            <th data-group="group3" data-hide="phone">Date 5</th>
            <th data-group="group3" data-hide="phone,tablet">Note</th>
            <th data-group="group3" data-hide="phone,tablet">Section</th>
        </tr>
        </thead>