Div Table Responsive - Header Repeats - html

Question

I have a DIV table, it is fully responsive. The table's head should repeat in each section when we view it in a small screen. Right now it shows in the first section but the second section is missing the header.
How can I make the header show in each section on a small screen? that looks like this sample: https://codepen.io/geoffyuen/pen/FCBEg (this sample is a tr td table, my table is a DIV table)
Note: The browser needs to be minimized to see the table responsive.
DEMO: http://jsfiddle.net/w04g2qj9/2/
CSS
.header {
width: 100%;
float: left;
}
.header1 {
width: 33%;
float:left;
background: #bbb;
height: 25px;
}
.row1, .row2 {
width: 33%;
float:left;
background: #ddd;
height: 25px;
}
#media all and (max-width: 480px)
{
.header
{
width:40%;
height: 100%;
float:left;
background: red !important;
}
.header1, .row1, .row2 {width: 100% !important}
.row {
width: 60% !important; margin-bottom: 5px; float:left
}
}
HTML
<div class="table">
<div class="header">
<div class="header1">
Header 01
</div>
<div class="header1">
Header 02
</div>
<div class="header1">
Header 03
</div>
</div>
<div class="row">
<div class="row1">
row 01-1
</div>
<div class="row1">
row 02-1
</div>
<div class="row1">
row 03-1
</div>
</div>
<div class="row">
<div class="row2">
row 01-2
</div>
<div class="row1">
row 02-2
</div>
<div class="row1">
row 03-2
</div>
</div>
</div>

Answer 1

Div Table Image
If you run the code snippet you've provided, this is the result. I'm assuming that this is what you wanted, however, I do see a lot of redundancies in your css. For example, why have two classes row1 and row2 when they are the same thing? Unless you plan to change it so they are different at a later time.

Answer 2

Using Flexyou can achieve this> See Sample code below..Hope it helps
.footer_mainDIV {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.header {
width: 100%;
float: left;
}
.header1 {
width: 33%;
float: left;
background: #ccc;
height: 25px;
}
.row1,
.row2 {
width: 33%;
float: left;
background: #ddd;
height: 25px;
}
#media all and (max-width: 480px) {
.footer_mainDIV {
flex-direction: row;
flex-wrap: nowrap;
text-align: center;
}
.header {
height: 100%;
float: left;
background: red !important;
flex: 1;
/* Add other alignment related styles*/
}
.header1,
.row1,
.row2 {
width: 100% !important
}
.row {
flex: 1;
margin-bottom: 5px;
background: green !important;
}
}
<div class="footer_mainDIV">
<div class="header">
<div class="header1">
Header 01
</div>
<div class="header1">
Header 02
</div>
<div class="header1">
Header 03
</div>
</div>
<div class="row">
<div class="row1">
row 1-1
</div>
<div class="row1">
row 1-2
</div>
<div class="row1">
row 1-3
</div>
</div>
<div class="row">
<div class="row2">
row 2-1
</div>
<div class="row1">
row 2-2
</div>
<div class="row1">
row 3-3
</div>
</div>
</div>