What is the proper arrangement for table-header-group?
I don't have any experience with it but logic dictates that you can only have one thead
so you can only have one table-header-group
So your structure should, perhaps, look more like this:
.footer {
display: table;
width: 50%;
table-layout: fixed;
}
.footer-title-box {
display: table-header-group;
font-weight: bold;
}
.footer-row-box {
display: table-row-group;
}
.footer-box {
display: table-cell;
text-align: center;
}
<div class="footer">
<div class="footer-title-box">
<div class="footer-box">Title</div>
<div class="footer-box caption">Title</div>
</div>
<div class="footer-row-box">
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
</div>
<div class="footer-row-box">
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
</div>
<div class="footer-row-box">
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
<div class="footer-box">Content</div>
</div>
</div>
Comments
-
alex almost 2 years
I'm trying to build a footer that has two title columns and three content columns.
I'd like to use
display: table-cell
for the content columns, and believe I need to usedisplay: table-header-group
for the title columns.While researching
display: table-header-group
, I could not find any documentation at all on how to use this CSS property. W3Cschools says the following.table-header-group: Let the element behave like a
thead
element. (source)That unfortunately doesn't tell me how I should arrange my
divs
So far I've got the following code, but I'm not sure if I'm using
table-header-group
correctly.footer { display: table; } .footer-box { display: table-cell; } .footer-title-box { display: table-header-group; } <div class="footer"> <div class="footer-title-box"> Title </div> <div class="footer-title-box"> Title </div> <div class="footer-box"> Content </div> <div class="footer-box"> Content </div> <div class="footer-box"> Content </div> </div>
If anyone has any experience with
table-header-group
and could shed some light on it, I would be incredibly grateful.