Style table depending on number of rows

Question

Using only CSS, is it possible to somehow style a table differently depending on the number of rows (or columns)

Scenario, I have a table defined like this:

<table class='my-table-css'>
<tr> <td></td></tr> 
........
<tr> <td></td></tr> 
</table>

If there are more than three rows in the table I need to color even rows differently than odd rows

If there are less than four rows in the table I need to color even rows and odd rows the same way

Table 1, even rows have background color

       --------------
Row 1  |     |      |
       --------------
Row 2  | BG  | BG   |
       --------------
Row 3  |     |      |
       -------------- 
Row 4  | BG  | BG   |
       --------------

Table 2, even rows have no background color

       --------------
Row 1  |     |      |
       --------------
Row 2  |     |      |
       --------------
Row 3  |     |      |

I need to accomplish this using CSS only, any ideas from CSS gurus out there?

https://alistapart.com/article/quantity-queries-for-css/, http://quantityqueries.com/ — misorude, Aug 30 '19 at 12:20

Temani Afif · Answer 1 · 2019-08-30T19:22:30.550

Here is an idea based on this previous answer where the only requirement is to know the height of each row (I know in most of the cases it's not fixed). You can easily scale this solution to any number of row:

table {
 --h:45px; /* Each row will be have a height equal to 45px*/
 --n:3;   /* The condition of number of rows*/
 border-spacing:0;
 background:
    repeating-linear-gradient(to bottom, red 0 var(--h),blue var(--h) calc(2*var(--h))) 0 0/100% calc(100% - var(--h)*var(--n)),
    orange;
  
  margin:10px;
}
table td {
  border:1px solid;
  padding:10px;
  font-size:20px;
}

<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>

That's purely evil, congrats :D I would have added a class in JS based on number of rows to avoid too much thinking ^^ — Kaddath, Aug 30 '19 at 12:04
This is really clever :) But unfortunatelyi have no way of knowing the row height — MikNiller, Aug 30 '19 at 12:07

score 3 · Accepted Answer · edited Aug 30 '19 at 12:24

You can try with tr:nth-last-child(2):nth-child(2) {}

it works only if there is 3 rows.

For 2 rows, update the value of nth-last-child To 1.

table { 
 margin:10px;
}
table tr:nth-child(odd) {
 background:red;
}

table tr:nth-child(even) {
 background:blue;
}

table td {
  border:1px solid;
  padding:10px;
  font-size:20px;
}

table tr:nth-child(2):nth-last-child(2){
  background:red;
}
table tr:nth-child(2):nth-last-child(1) {
  background:red;
}

<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>

The rule must apply to tables with various number of rows, from 1 to several hundreds.... — MikNiller, Aug 30 '19 at 12:14
this would do it I guess. better add an example to demonstrate ;) — Temani Afif, Aug 30 '19 at 12:15
@temaniafif you may add an examplefor me if you do not mind, from my mobile it is almost mission impossible. — G-Cyrillus, Aug 30 '19 at 12:21
@MikNiller check the update ... I have to think simple before going with crazy solutions :p — Temani Afif, Aug 30 '19 at 12:25

Style table depending on number of rows

2 Answers2