移動最初の列としてTHEADセクション

Question

は、それは以下の画像のようにレンダリングし、次のHTML

<table> 
<thead> 
    <tr> 
     <th>Header 1</th> 
     <th>Header 2</th> 
     <th>Header 3</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>data 1.1</td> 
     <td>data 1.2</td> 
     <td>data 1.3</td> 
    </tr> 
    <tr> 
     <td>data 2.1</td> 
     <td>data 2.2</td> 
     <td>data 2.3</td> 
    </tr> 
</tbody> 

を考えてみましょう以前のhtmlは次の画像のようにレンダリングされますか？あなたは、CSSでこれをしなければならないと、あなたのHTMLあなたがFlexboxでそれを行うことができますが変更できない場合

Answer 1

（インデックスを注意してください）。

table { 
 
    display: flex; 
 
} 
 
thead tr, tbody tr { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Header 1</th> 
 
     <th>Header 2</th> 
 
     <th>Header 3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>data 1.1</td> 
 
     <td>data 1.2</td> 
 
     <td>data 1.3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>data 2.1</td> 
 
     <td>data 2.2</td> 
 
     <td>data 2.3</td> 
 
    </tr> 
 
    </tbody>