table-header-group and table-footer-group in a Div

Question

Is there a way of using table-header-group and table-footer-group in a div instead of in a thead or tfoot?

Answer 1

According to www.w3.org it is allowd to use display: table-header-group when the parent (the element containing the div) is displayed as a table or inline-table. So something like this should be allowed

<table>
  <div style="display: table-header-group;">header group</div>
</table>

If the parent is not a table, then it should be inserted, according to point 4 on the www.w3.org page.

The big problem is, whether all (major) browsers support this. Especially IE(6) is known for not supporting most kinds of display types.

Answer 2

According to W3C you cannot use a element as a direct child node inside of a <table>. http://w3schools.com/html5/tag_table.asp. This article states that a <table> may contain:

• tr
• td
• th
• caption
• col
• colgroup
• thead
• tfoot
• tbody

what you could do if you want to avoid using a table is:

<div style="display:table;">
  <div style="display:table-header-group;">header group</div>
</div>

This solution however, is only possible in HTML5.