New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add info to the docs about ideal html/css structure #91

Closed
mkoryak opened this Issue May 27, 2014 · 4 comments

Comments

Projects
None yet
2 participants
@mkoryak
Owner

mkoryak commented May 27, 2014

also add a section to the docs about info needed to submit a bug / question

@mkoryak mkoryak added this to the 1.3.0 milestone May 27, 2014

@mkoryak mkoryak added the enhancement label May 27, 2014

@mkoryak mkoryak self-assigned this May 27, 2014

@mkoryak

This comment has been minimized.

Show comment
Hide comment
@mkoryak

mkoryak Jun 17, 2014

Owner

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

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 and thead
  • 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.
Owner

mkoryak commented Jun 17, 2014

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

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 and thead
  • 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.
@artursudnik

This comment has been minimized.

Show comment
Hide comment
@artursudnik

artursudnik May 23, 2015

I have centered table by "margin: 0 auto;" and header when floated is moved to the left of the page. All CSS styles are applied by matching table class. No wrapper around it.

artursudnik commented May 23, 2015

I have centered table by "margin: 0 auto;" and header when floated is moved to the left of the page. All CSS styles are applied by matching table class. No wrapper around it.

@mkoryak

This comment has been minimized.

Show comment
Hide comment
@mkoryak

mkoryak May 23, 2015

Owner

ok, if you think this is a bug, please create a new issue and provide a jsfiddle.
I think that you might be able to solve it by using the option useAbsolutePositioning:false - it is probably happening because with the default positioning method, the table is wrapped by a a div with relative positioning, so that would mess up your 0 auto

Owner

mkoryak commented May 23, 2015

ok, if you think this is a bug, please create a new issue and provide a jsfiddle.
I think that you might be able to solve it by using the option useAbsolutePositioning:false - it is probably happening because with the default positioning method, the table is wrapped by a a div with relative positioning, so that would mess up your 0 auto

@artursudnik

This comment has been minimized.

Show comment
Hide comment
@artursudnik

artursudnik May 23, 2015

I added a wrapper around the table and moved all styles that position the table to it. It solved the problem.

artursudnik commented May 23, 2015

I added a wrapper around the table and moved all styles that position the table to it. It solved the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment