Переместить раздел 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> 

Он оказывает как следующее изображение:

это возможно только с помощью CSS, чтобы иметь предыдущий html визуализируется как следующее изображение? (Обратите внимание на индексы)

Answer 1

Если вы должны сделать это с помощью CSS, и вы не можете изменить ваш HTML вы можете сделать это с Flexbox.

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>