Div表響應 - 標題重複

Question

我有一個DIV表，它是完全響應。當我們在小屏幕上查看時，表格的頭部應該在每個部分重複。現在它顯示在第一部分，但第二部分缺少標題。

如何在小屏幕上的每個部分顯示標題？看起來像這樣的例子：https://codepen.io/geoffyuen/pen/FCBEg（此樣品爲TR TD表，我的表是一個DIV表）

注：瀏覽器需要最小化來查看錶響應。

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

如果您運行的代碼片斷您提供，這是結果。我假設這是你想要的，但是，我確實在你的CSS中看到了很多冗餘。例如，爲什麼有兩個類row1和row2時它們是相同的東西？除非你打算改變它，以便以後它們不同。

Answer 2

使用Flexyou可以實現這一>查看示例代碼below..Hope它有助於

.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>