行を別の行に配置する方法は？/CSS

Question

画像に「Sezon」と「Poza sezonem」ブロックが別のブロック（ND-CZW、PT-SB）にあります

私はこの画像のHTMLコードを書こうとしています。セゾン、ポザセゾネムブロックを下のブロックにどのように置くことができますか？

<div class="parent"> 
<tr> 
<td style="text-align: center;background-color: #E96165;color: #fff">Ilosc 
gosci</td> 
<td class="baslik1">Sezon</td> 
<td class="baslik1">Poza sezonem</td> 
<td class="baslik1">Poza sezonem 2</td> 
</tr> 
<tr> 
<td class="baslik2"> </td> 
<td class="baslik2">ND-CZW</td> 
<td class="baslik2">PT-SB</td> 
<td class="baslik2">ND-CZW</td> 
</tr> 
</div> 

Answer 1

私はこのような絶対位置とフレキシボックスを使用します。あなたのコードは、いくつかの間違った構文を持っているようだ

.parent { 
 
    display: flex; 
 
} 
 

 
.table { 
 
    display: flex; 
 
    flex-direction: column; 
 
    box-shadow: 0 20px 30px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
 
    background: lightgrey; 
 
} 
 

 
.table:nth-child(2) { 
 
    z-index: 2; 
 
} 
 
.table:nth-child(3) { 
 
    z-index: 3; 
 
} 
 

 
.table > div { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.cell { 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    height: 60px; 
 
    width: 200px; 
 
    border-bottom: 1px solid grey; 
 
} 
 

 
.cell--head { 
 
    height: 60px; 
 
    position: relative; 
 
} 
 

 
.cell--logo { 
 
    background-color: #E96165; 
 
    color: #fff; 
 
    padding: 0; 
 
    height: 60px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.cell--head > div { 
 
    padding-top: 30px; 
 
} 
 

 
.cell > div { 
 
    flex: 1; 
 
    text-align: center; 
 
    border-left: 1px solid grey; 
 
    padding: 20px; 
 
} 
 

 
.cell > div:first-of-type { 
 
    border-left: 0; 
 
} 
 

 
.label { 
 
    position: absolute; 
 
    top: -2px; 
 
    background: black; 
 
    color: white; 
 
    transform: translate(-50%, 0%); 
 
    left: 50%; 
 
    padding: 5px; 
 
    font-size: 10px; 
 
}

<div class="parent"> 
 
    <div class="table"> 
 
    <div class="cell cell--logo"> 
 
     Ilosc gosci 
 
    </div> 
 
    <div class="cell"> 
 
     Ilosc gosci 
 
    </div> 
 
    </div> 
 
    <div class="table"> 
 
    <div class="cell cell--head"> 
 
     <span class="label">Sezon</span> 
 
     <div>ND-CZW</div> 
 
     <div>ND-CZW</div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div>245 pln</div> 
 
     <div>245 pln</div> 
 
    </div> 
 
    </div> 
 
    <div class="table"> 
 
    <div class="cell cell--head"> 
 
     <span class="label">Poza sezonem</span> 
 
     <div>ND-CZW</div> 
 
     <div>ND-CZW</div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div>245 pln</div> 
 
     <div>245 pln</div> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <td class="baslik2"></td> 
 
    <td class="baslik2"></td> 
 
    <td class="baslik2"></td> 
 
    <td class="baslik2"></td> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

、私は同じでを達成しようとしました下のフィドル

http://jsfiddle.net/Parthoghsh820/akhwgg2f/3/

<table> 
<thead> 
    <tr class="header"> 
     <th colspan="2"> 
     <span>Major 1</span> 
     </th> 
     <th colspan="2"> 
     <span>Major 2</span> 
     </th> 
    </tr> 
    <tr class="subheader"> 
     <th>col1</th> 
     <th>col2</th> 
     <th>col3</th> 
     <th>col4</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
     <td>data4</td> 
    </tr> 
</tbody>