时间戳

首页 > 解决方案 > 列出具有逐渐增加的 CSS 属性的项目

html - 列出具有逐渐增加的 CSS 属性的项目

问题描述

我正在处理table呈现的 HTML，以便所有这些rows都position absolute具有逐渐增加的top属性。

.table{
  position: relative;
}
tr{
  position: absolute;
  height: 25px;
  text-align: center;
}
td, th{
  width: 80px;
}
tr:nth-child(1){
  top: 0;
}
tr:nth-child(2){
  top: 25px;
}
tr:nth-child(3){
  top: 50px;
}
<table>
<tr>
  <th>header 1</th>
  <th>header 2</th>
  <th>header 3</th>
</tr>
<tr>
  <td>c1</td>
  <td>c2</td>
  <td>c3</td>
</tr>
<tr>
  <td>c11</td>
  <td>c22</td>
  <td>c33</td>
</tr>

我想做一些类似的事情，tr:nth-child(n){top: n*25px;}而不是为每一行重复它。有没有办法使用纯CSS 做到这一点？

我知道这不是渲染表格的正确方法，我仍然很好奇是否有办法实现它。

标签： htmlcss

解决方案

仅使用纯 css 您无法做到...

您可以使用 sass 文件执行此操作：

见这里：https ://jsfiddle.net/vpj3ek24/1/

 .table{
  position: relative;
}
tr{
  position: absolute;
  height: 25px;
  text-align: center;
}
td, th{
  width: 80px;
}
 @mixin child($n) {
     &:nth-child(#{$n}){
         top:$n*25px;
     }
 }

 div{
     @include child(n);
    }

推荐阅读