AMS styleguide

Table with Fixed Header and Columns

Table with fixed header and column is a jQuery plugin TableHeadFixer. Plugins files stored under /libcommon/plugins/TableHeadFixer/tableHeadFixer.js, after include this plugin call .tableHeadFixer({param}) function after page rendered. To work this plugin properly, target table should be inside of a div, where included all style like height,width etc.

Fixed Header

Example

Name	Town	County	Age	Profession	Anual Income	Children
John Smith	Macelsfield	Cheshire	52	Brewer	£47,000	2
Jenny Jones	Threlkeld	Cumbria	34	Shepherdess	£28,000	0
Peter Frampton	Avebury	Wiltshire	57	Musician	£124,000	4
Simon King	Malvern	Worchestershire	48	Naturalist	£65,000	2
Lucy Diamond	St Albans	Hertfordshire	67	Pharmasist	Retired	3
Austin Stevenson	Edinburgh	Lothian	36	Vigilante	£86,000	0
Wilma Rubble	Bedford	Bedfordshire	43	Housewife	N/A	1
Kat Dibble	Manhattan	New York	55	Policewoman	$36,000	1
Henry Bolingbroke	Bolingbroke	Lincolnshire	45	Landowner	Lots	6
Alan Brisingamen	Alderley	Cheshire	352	Arcanist	A pile of gems	0

<!-- CSS for parent div -->
.parent-dev-1{
    height:200px
}
<div class="parent-div">
    <table class="table" id="fixed-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Town</th>
                <th>County</th>
                <th>Age</th>
                <th>Profession</th>
                <th>Anual Income</th>
                <th>Children</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Smith</td>
                <td>Macelsfield</td>
                <td>Cheshire</td>
                <td>52</td>
                <td>Brewer</td>
                <td>£47,000</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Jenny Jones</td>
                <td>Threlkeld</td>
                <td>Cumbria</td>
                <td>34</td>
                <td>Shepherdess</td>
                <td>£28,000</td>
                <td>0</td>
            </tr>
            .......
            .......
            <tr>
                <td>Henry Bolingbroke</td>
                <td>Bolingbroke</td>
                <td>Lincolnshire</td>
                <td>45</td>
                <td>Landowner</td>
                <td>Lots</td>
                <td>6</td>
            </tr>
            <tr>
                <td>Alan Brisingamen</td>
                <td>Alderley</td>
                <td>Cheshire</td>
                <td>352</td>
                <td>Arcanist</td>
                <td>A pile of gems</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- Javascript code to initialise fixed column and header -->
<script type="text/javascript">
    $(document).ready(function () {
        $("#fixed-header").tableHeadFixer();
    });
</script>

Fixed First Left Column

Name	Town	County	Age	Profession	Anual Income	Marital Status	Children	Hobby
John Smith	Macelsfield	Cheshire	52	Brewer	£47,000	Single	2	Playing Cricket
Jenny Jones	Threlkeld	Cumbria	34	Shepherdess	£28,000	Married	0	Watching TV
Peter Frampton	Avebury	Wiltshire	57	Musician	£124,000	Single	4	Playing Football
Simon King	Malvern	Worchestershire	48	Naturalist	£65,000	Single	2	Reading Books
Lucy Diamond	St Albans	Hertfordshire	67	Pharmasist	Retired	Married	3	Cooking

<!-- CSS Styles -->
.parent-div-2 {
    width: 700px !important;
}
#fixed-left-column tbody tr td,
#fixed-left-column thead tr th{
    min-width: 125px !important;
}

<!-- HTML Contents -->

<table class="table table-striped" id="fixed-left-column">
    <thead>
        <tr>
            <th>Name</th>
            <th>Town</th>
            <th>County</th>
            <th>Age</th>
            <th>Profession</th>
            <th>Anual Income</th>
            <th>Marital Status</th>
            <th>Children</th>
            <th>Hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Smith</td>
            <td>Macelsfield</td>
            <td>Cheshire</td>
            <td>52</td>
            <td>Brewer</td>
            <td>£47,000</td>
            <td>Single</td>
            <td>2</td>
            <td>Playing Cricket</td>
        </tr>
        <tr>
            <td>Jenny Jones</td>
            <td>Threlkeld</td>
            <td>Cumbria</td>
            <td>34</td>
            <td>Shepherdess</td>
            <td>£28,000</td>
            <td>Married</td>
            <td>0</td>
            <td>Watching TV</td>
        </tr>
        <tr>
            <td>Peter Frampton</td>
            <td>Avebury</td>
            <td>Wiltshire</td>
            <td>57</td>
            <td>Musician</td>
            <td>£124,000</td>
            <td>Single</td>
            <td>4</td>
            <td>Playing Football</td>
        </tr>
        <tr>
            <td>Simon King</td>
            <td>Malvern</td>
            <td>Worchestershire</td>
            <td>48</td>
            <td>Naturalist</td>
            <td>£65,000</td>
            <td>Single</td>
            <td>2</td>
            <td>Reading Books</td>
        </tr>
        <tr>
            <td>Lucy Diamond</td>
            <td>St Albans</td>
            <td>Hertfordshire</td>
            <td>67</td>
            <td>Pharmasist</td>
            <td>Retired</td>
            <td>Married</td>
            <td>3</td>
            <td>Cooking</td>
        </tr>
    </tbody>
</table>

<!-- Javascript Code -->

<script type="text/javascript">
    $(document).ready(function () {
        $("#fixed-left-column").tableHeadFixer({
            'left': 1,
            'head': false
        });
    });
</script>

Fixed Two Left Column

Name	Town	County	Age	Profession	Anual Income	Marital Status	Children	Hobby
John Smith	Macelsfield	Cheshire	52	Brewer	£47,000	Single	2	Playing Cricket
Jenny Jones	Threlkeld	Cumbria	34	Shepherdess	£28,000	Married	0	Watching TV
Peter Frampton	Avebury	Wiltshire	57	Musician	£124,000	Single	4	Playing Football
Simon King	Malvern	Worchestershire	48	Naturalist	£65,000	Single	2	Reading Books
Lucy Diamond	St Albans	Hertfordshire	67	Pharmasist	Retired	Married	3	Cooking

<!-- CSS Styles -->
.parent-div-2 {
    width: 700px !important;
}
#fixed-two-left-column tbody tr td,
#fixed-two-left-column thead tr th{
    min-width: 125px !important;
}

<!-- HTML Contents -->

<table class="table table-striped" id="fixed-left-column">
    <thead>
        <tr>
            <th>Name</th>
            <th>Town</th>
            <th>County</th>
            <th>Age</th>
            <th>Profession</th>
            <th>Anual Income</th>
            <th>Marital Status</th>
            <th>Children</th>
            <th>Hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Smith</td>
            <td>Macelsfield</td>
            <td>Cheshire</td>
            <td>52</td>
            <td>Brewer</td>
            <td>£47,000</td>
            <td>Single</td>
            <td>2</td>
            <td>Playing Cricket</td>
        </tr>
        <tr>
            <td>Jenny Jones</td>
            <td>Threlkeld</td>
            <td>Cumbria</td>
            <td>34</td>
            <td>Shepherdess</td>
            <td>£28,000</td>
            <td>Married</td>
            <td>0</td>
            <td>Watching TV</td>
        </tr>
        <tr>
            <td>Peter Frampton</td>
            <td>Avebury</td>
            <td>Wiltshire</td>
            <td>57</td>
            <td>Musician</td>
            <td>£124,000</td>
            <td>Single</td>
            <td>4</td>
            <td>Playing Football</td>
        </tr>
        <tr>
            <td>Simon King</td>
            <td>Malvern</td>
            <td>Worchestershire</td>
            <td>48</td>
            <td>Naturalist</td>
            <td>£65,000</td>
            <td>Single</td>
            <td>2</td>
            <td>Reading Books</td>
        </tr>
        <tr>
            <td>Lucy Diamond</td>
            <td>St Albans</td>
            <td>Hertfordshire</td>
            <td>67</td>
            <td>Pharmasist</td>
            <td>Retired</td>
            <td>Married</td>
            <td>3</td>
            <td>Cooking</td>
        </tr>
    </tbody>
</table>

<!-- Javascript Code -->

<script type="text/javascript">
    $(document).ready(function () {
        $("#fixed-two-left-column").tableHeadFixer({
            'left': 2,
            'head': false
        });
    });
</script>

Fixed Header and Two Left Column

Name	Town	County	Age	Profession	Anual Income	Marital Status	Children	Hobby
John Smith	Macelsfield	Cheshire	52	Brewer	£47,000	Single	2	Playing Cricket
Jenny Jones	Threlkeld	Cumbria	34	Shepherdess	£28,000	Married	0	Watching TV
Peter Frampton	Avebury	Wiltshire	57	Musician	£124,000	Single	4	Playing Football
Simon King	Malvern	Worchestershire	48	Naturalist	£65,000	Single	2	Reading Books
Lucy Diamond	St Albans	Hertfordshire	67	Pharmasist	Retired	Married	3	Cooking

<!-- CSS Styles -->
.parent-div-3{
    width: 700px !important;
    height: 200px !important;
}
#fixed-header-left-column tbody tr td,
#fixed-header-left-column thead tr th{
    min-width: 125px !important;
}

<!-- HTML Contents -->

<table class="table table-striped" id="fixed-left-column">
    <thead>
        <tr>
            <th>Name</th>
            <th>Town</th>
            <th>County</th>
            <th>Age</th>
            <th>Profession</th>
            <th>Anual Income</th>
            <th>Marital Status</th>
            <th>Children</th>
            <th>Hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Smith</td>
            <td>Macelsfield</td>
            <td>Cheshire</td>
            <td>52</td>
            <td>Brewer</td>
            <td>£47,000</td>
            <td>Single</td>
            <td>2</td>
            <td>Playing Cricket</td>
        </tr>
        <tr>
            <td>Jenny Jones</td>
            <td>Threlkeld</td>
            <td>Cumbria</td>
            <td>34</td>
            <td>Shepherdess</td>
            <td>£28,000</td>
            <td>Married</td>
            <td>0</td>
            <td>Watching TV</td>
        </tr>
        <tr>
            <td>Peter Frampton</td>
            <td>Avebury</td>
            <td>Wiltshire</td>
            <td>57</td>
            <td>Musician</td>
            <td>£124,000</td>
            <td>Single</td>
            <td>4</td>
            <td>Playing Football</td>
        </tr>
        <tr>
            <td>Simon King</td>
            <td>Malvern</td>
            <td>Worchestershire</td>
            <td>48</td>
            <td>Naturalist</td>
            <td>£65,000</td>
            <td>Single</td>
            <td>2</td>
            <td>Reading Books</td>
        </tr>
        <tr>
            <td>Lucy Diamond</td>
            <td>St Albans</td>
            <td>Hertfordshire</td>
            <td>67</td>
            <td>Pharmasist</td>
            <td>Retired</td>
            <td>Married</td>
            <td>3</td>
            <td>Cooking</td>
        </tr>
    </tbody>
</table>

<!-- Javascript Code -->

<script type="text/javascript">
    $(document).ready(function () {
      $("#fixed-header-left-column").tableHeadFixer({
            'left': 2,
            'head': true
        });
    });
</script>

Other Options

With these options you can fix table head and any number of left columns, table head with any number of right columns, right column, footer, footer with any number of right and left columns etc.

Attribute	Value	Default
foot	true/false	false
head	true/false	true
left	1,2,3,4,5, etc	0
right	1,2,3,4,5, etc	0

For more details and examples Click here