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
reflow
event on it when it becomes visible.Ideal world:
th
tags for cells, otherwise you need to change thecellTag
plugin optioncolgroup
element (though it is supported only if the number ofcol
elements withincolgroup
match the number of columns in your table)Will also work:
cell-padding
andcell-spacing
are supported but their use is discouragedWill not work:
id
tfoot
element, but that is not supported right now