CODEWITHSUNDEEP
htmlcss
internet
internet

Reputation: 313

Make a list of items with progressively increasing CSS propperty

I'm working on an HTML table rendered such that all the rows are position absolute with progressively increasing top property.

.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>

I want to do something like tr:nth-child(n){top: n*25px;} instead of repeating it for each row. Is there a way to do this using pure CSS?

I know this is not the right way to render a table, I'm still curious if there's a way to make it happen.

Upvotes: 1

Views: 76

Answers (2)

Varun G
Varun G

Reputation: 28

Can use position: static; and remove tr:nth-child(1). 

.table{
     position: relative;
   }
   tr{
     position: static;
     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;
   } */

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

With only pure css you can not do it...

You can do it with sass file:

See here: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);
    }

Upvotes: 1

Related Questions