Menu
Is there a way of using table-header-group and table-footer-group in a div instead of in a thead or tfoot?
233
The <tfoot> tag is used to group footer content in an HTML table. The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body). Browsers can use these elements to enable scrolling of the table body independently of the header and footer.
In this article, we define to group the header content in a table by using the <th> tag in HTML to set the header cell of a table. Two types of cells in an HTML table. Header Cell: It is used to hold the header information. Standard Cell: It is used to hold the body of data.
ⓘ thead – table heading group. The thead element represents the block of rows that consist of the column labels (headings) for its parent table element.
<th>: The Table Header element. The <th> HTML element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
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.
145
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:
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
