Do this, and you will avoid a lot of headaches not just with this plugin, but with your layouts in general
This plugin works by moving your table's header into a new table that it creates, it then floats that table in
the correct position. In order to accomplish this the plugin expects a few things to be true:
TLDR:
Your table's styles must continue to style the newly created table which will live inside of a container div
appended below your real table. The new table will have the same class(es) as your original table. The
table must be visible when you run the plugin ⟶If it is not, you will need to trigger a reflow event on it when it becomes visible.
Ideal world:
- Your table is visible when you run the plugin.
- Your table is styled via css on one of the table's DOM classes, and/or the styles work via a parent element.
Example:
table.myTable { ... }
div.table-container table { ... }
- The thead cells are also styled via non-inline css and the rules use element names or classes
- Your thead uses
th tags for cells, otherwise you need to change the cellTag plugin
option
- Your table does not make use of the
colgroup element (though it is supported
only if the number of col elements within colgroup match the
number of columns in your table)
Will also work:
- Your table uses inline css styles, or mixes inline styles with external styles described above.
- The thead cells may use the deprecated width attributes instead of css
- deprecated table attributes such as
cell-padding and cell-spacing are supported
but their use is discouraged
- Your table markup is straight up from 1998 (might work, but I will not help you if it doesn't)
Will not work:
- Your table is styled via css rules on the table's DOM
id
- Your thead cells are styled via similar id rules
#myTableRocks td { color: blue; }
- Your table has invalid markup, such as unmatched number of columns in tbody, thead or tfoot
- Your table doesnt have a thead
- You want to float the
tfoot element, but that is not supported right now
- Your table is hidden when you run the plugin so the column width calculations all fail.
This plugin works by moving your table's header into a new table that it creates, it then floats that table in the correct position. In order to accomplish this the plugin expects a few things to be true:
Your table's styles must continue to style the newly created table which will live inside of a container div appended below your real table. The new table will have the same class(es) as your original table. The table must be visible when you run the plugin ⟶If it is not, you will need to trigger a
reflowevent on it when it becomes visible.Ideal world:
thtags for cells, otherwise you need to change thecellTagplugin optioncolgroupelement (though it is supported only if the number ofcolelements withincolgroupmatch the number of columns in your table)Will also work:
cell-paddingandcell-spacingare supported but their use is discouragedWill not work:
idtfootelement, but that is not supported right now