Question

我有一个场景。我有一个表，其中有2列和10行。我必须填充第一列的所有行，然后填充另一列的所有行。但是当我创建它时，只是在column1之后添加column2的值。在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 demo

例如

<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（手工完成可能很乏味任务）。

数据在HTML中从列流到行

1 个答案: