Disabling the sticky/fixed header and having thead's between tbody's

psijake

I have a use case where there may be thead's between tbody's. I do not require sorting, paging, or filtering and instead opt for a scrollable table. The table structure is similar to the following:

<table>
  <thead />
  <tbody />
  <thead />
  <tbody />
</table>

By default DataTables will throw all of the thead's to the top. I would like for the headers to remain where they are in the HTML, and not be aggregated together at the top. I am fine with disabling the fixed-nature of the headers altogether, but when I attempted to do so using fixedHeader, no noticeable change was made:

https://jsfiddle.net/fpvqLzof/1/

My current use case needs all of the thead's to not be fixed (including the top-most), but it is possible that a future use case might require that the topmost header remain fixed, while the other headers float more freely. Is there a way to accomplish this?

I am aware I can just use <tbody> and apply a class to style it a make it look like a <thead>, but that is not very semantic and I would like to keep the HTML pure. DataTables also seems to fail if you do not have a <thead> element.

psijake

Here is an example of using non-semantic <tbody> but applying a class to make it look like a header:

https://jsfiddle.net/45d2Lvff/

In this case, no <thead> causes the following error:

TypeError: col is undefined

psijake

Apparently multiple thead's are not valid in HTML anyway, so this does not even make sense. I'll go along the path of treating these headers as sub-headers within <tbody> and require that the primary header, <thead>, be supplied. This will resolve the issues I referenced above and will require some re-architecting on my end.

This issue is resolved.