данные, передаваемые из столбца в строку в HTML

Question

У меня есть сценарий.У меня есть таблица, в которой есть 2 столбца и 10 строк.Я должен заполнить все строки первого столбца, а затем все строки другого столбца.но когда я создаю это просто добавление значения column2 после column1.Возможно ли это в HTML CSS?

например,

Id  Name
1   Onkar
2   Tiwari
3   Shweta

Я хочу сначала заполнить все значения столбца id, а затем все значения столбца name.На самом деле id столбец передается по Unix.

Не могли бы вы помочь мне сделать то же самое?

что я сделал

                                 <table>

                                <tr class="row2-column1" >
                                        <td>Axiom index</td>
                                </tr>
                                <tr class="row2-column2">
                                        <td>Cob Date </td>
                                </tr>
                                <tr class="row2-column3">
                                    <td>   Run Id </td>
                                </tr>
                                <tr class="row2-column4">
                                      <td>  is_month_end </td>
                                </tr>


                                <td>    %jobs_status1% </td>
                        </tr>
                         </table>
  This jobs_status  value is coming from unix. rows are 16 and columns are 2.

Answer 1

Вы можете попробовать использовать простое animation свойства color с прогрессивной задержкой для каждого <td>.Последний эффект - последовательная печать столбцов и строк.

Демонстрация Codepen

например

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
       <td>1</td><td>Name 1</td>
    </tr>
    ...    
    <tr>
       <td>10</td><td>Name 10</td>
    </tr>
  </tbody>
</table>

CSS

tbody td { 
  color: rgba(0,0,0, 0); 
  animation: colorize .15s linear 0s forwards;
}

@keyframes colorize {
  from { color: rgba(0,0,0, 0);  }
  to { color: rgba(0,0,0, 1);  }
}

/* first column */
tr:nth-of-type(1) td:nth-of-type(1) { animation-delay: 1s; }
tr:nth-of-type(2) td:nth-of-type(1) { animation-delay: 1.5s; }
tr:nth-of-type(3) td:nth-of-type(1) { animation-delay: 2s; }
tr:nth-of-type(4) td:nth-of-type(1) { animation-delay: 2.5s; }
tr:nth-of-type(5) td:nth-of-type(1) { animation-delay: 3s; }
tr:nth-of-type(6) td:nth-of-type(1) { animation-delay: 3.5s; }
tr:nth-of-type(7) td:nth-of-type(1) { animation-delay: 4s; }
tr:nth-of-type(8) td:nth-of-type(1) { animation-delay: 4.5s; }
tr:nth-of-type(9) td:nth-of-type(1) { animation-delay: 5s; }
tr:nth-of-type(10) td:nth-of-type(1) { animation-delay: 5.5s; }


/* second column */
tr:nth-of-type(1) td:nth-of-type(2) { animation-delay: 6s; }
tr:nth-of-type(2) td:nth-of-type(2) { animation-delay: 6.5s; }
tr:nth-of-type(3) td:nth-of-type(2) { animation-delay: 7s; }
tr:nth-of-type(4) td:nth-of-type(2) { animation-delay: 7.5s; }
tr:nth-of-type(5) td:nth-of-type(2) { animation-delay: 8s; }
tr:nth-of-type(6) td:nth-of-type(2) { animation-delay: 8.5s; }
tr:nth-of-type(7) td:nth-of-type(2) { animation-delay: 9s; }
tr:nth-of-type(8) td:nth-of-type(2) { animation-delay: 9.5s; }
tr:nth-of-type(9) td:nth-of-type(2) { animation-delay: 10s; }
tr:nth-of-type(10) td:nth-of-type(2) { animation-delay: 10.5s; }

Конечно, если выЧтобы иметь (путь) более 10 строк, вы должны сгенерировать animation-delay с помощью таких инструментов, как less или sass (выполнение этого вручную может быть утомительным занятием).