CODEWITHSUNDEEP
css
MikNiller
MikNiller

Reputation: 1280

Style table depending on number of rows

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?

Upvotes: 2

Views: 707

Answers (2)

Temani Afif
Temani Afif

Reputation: 272919

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>

Upvotes: 4

G-Cyrillus
G-Cyrillus

Reputation: 105903

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>

Upvotes: 3

Related Questions