Tables: Fixed Headers and/or Sorting

[ebeshero]

Tables with fixed headers, approaches:

@ahunker

CSS only:
https://codepen.io/tjvantoll/pen/JEKIu
http://jsfiddle.net/3fXjD/1305/

JavaScript:
http://jsfiddle.net/jmosbech/stFcx/

[ebeshero]

@RJP43 About JavaScript for sorting tables: Here's the example by @djbpitt I mentioned:
http://aal.obdurodon.org/

[RJP43]

@ahunker I have an example of the fixed table header working currently here on the Eldritch project using only CSS. There are clearly some quirks (I think due to the lengthy text in the <th> elements. Obviously could tweak this further as you try to implement it on your site.

Here is the bit of HTML that is important:

<table class="fixed_headers">
            <thead>
               <tr class="top">
                  <th>Word</th>
                  <th>Word Type</th>
                  <th>Number of Synsets</th>
                  <th>Count Within <i>Call of Cthulhu</i></th>
                  <th>Count Within <i>Mountains of Madness</i></th>
                  <th>Count Within <i>Shadow Over Innsmouth</i></th>
                  <th>Total Word Count</th>
                  <th>List of Synset</th>
               </tr>
            </thead>
            <tbody>
               <tr>

You need the class on the <table> element, <thead> surrounding the table row with the headings, and <tbody> surrounding all of the table rows that make up the main portion of the table. The class attribute on the first <tr> isn't necessary and is being used for another aspect of the page.

Here is the bit of CSS you need:

.fixed_headers{
    width: 100%;
    margin: auto;
    border-collapse: collapse;
}
td{
    margin: 2px;
    padding: 20px;
    text-align: left;
    overflow: auto;
    text-align: left;
    font-size: 20px;
    table-layout: fixed;
}
th{
    table-layout: fixed;
    border: 2px solid #182327;
    font-size: 16px;
    background-color: #FFFFFF;
    text-align: left;
    color: #182327;
    margin: 5px;
    padding: 5px;
}
tr{
    table-layout: fixed;
    border: 1px solid #FFF;
    display: block;
    width: 100%;
    position: relative;
}
thead{
    table-layout: fixed;
}
tbody{
    table-layout: fixed;
    display: block;
    overflow: auto;
    width: 100%;
    height: 500px;
}

Some of this reflects style preferences and you should experiment with margins, colors, padding, borders, etc. when you rip this code for Hamilton.