Вертикальное заполнение таблицы

Question

Подскажите пожалуйста, возможно ли заполнять html-таблицу вертикально, а не горизонтально?

В коде ячейки следуют:

<tr>
 <td>1
 <td>2
 <td>3
<tr>
 <td>4
 <td>5
 <td>6

а выводятся так:

|1|4|

|2|5|

|3|6|

Answer 1

можно попробовать использовать flex, например

.block {
    display:        flex;
    flex-direction: column;
    flex-wrap:      wrap;
    
    width:          50px;
    height:         100px;
    
    border:         1px solid red;
}

.block div {
    flex:           1 1 33%;
}

<div class = 'block'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

можно еще попробовать grid, например

.block {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-flow: column;
    
    width:                  50px;
    
    border:                 1px solid red;
}

.block div {
    border:                 1px solid lime;
}

<div class = 'block'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Answer 2

Можно использовать flex, например:

tbody {
  display:flex;
}
tr {
  display:flex;
  flex-direction: column;
  flex-wrap:      wrap;
}
td {
  border: 1px solid red;
}

<table>
  <tbody>
    <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
    </tr>
    <tr>
     <td>4</td>
     <td>5</td>
     <td>6</td>
    </tr>
  </tbody>
</table>

Answer 3

Пользуйся таблицей сразу и не парься с grid и flex. К тому же выполняя код все ответы у ребят получаются не того результата, что тебе требуется.

table {
  padding: 3px;
  border: 1px solid red;
  border-radius: 3px;
}

td {
  border: 1px solid black;
}

<table>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
</table>

БЛОГ НА HUSL

Вертикальное заполнение таблицы

Ответы (3 шт):