CODEWITHSUNDEEP
htmlcss
ctwheels
ctwheels

Reputation: 22817

How to style alternate table rows WITHOUT pseudo-classes, JS, or <tr> classes

I'm using an old online HTML editor/creator that does not allow me to insert pseudo-classes or JS.

I am wondering if anyone knows of a way to style alternate table rows without pseudo-classes and without assigning alternate table rows a class, nor the use of JS.

The reason for not giving alternate rows a specific class is that the content is editable by other administrator users, however they are not familiar with HTML, so I am creating a stylesheet that they can attach to their HTML documents.

Any solutions using JS or pseudo-classes are immediately removed by this old HTML editor/creator system, and any solution that needs an understanding of HTML is not realizable.

Below is a typical HTML table which CANNOT be edited (yes this includes JS)

HTML

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>2</td>
    <td>4</td>
    <td>6</td>
    <td>8</td>
    <td>10</td>
  </tr>
  <tr>
    <td>3</td>
    <td>6</td>
    <td>9</td>
    <td>12</td>
    <td>15</td>
  </tr>
  <tr>
    <td>4</td>
    <td>8</td>
    <td>12</td>
    <td>16</td>
    <td>20</td>
  </tr>
  <tr>
    <td>5</td>
    <td>10</td>
    <td>15</td>
    <td>20</td>
    <td>25</td>
  </tr>
</table>

The end result is for alternate rows to be of a different colour, provided the way that this is accomplished DOES NOT include:

  1. JS
  2. Pseudo-classes
  3. Knowledge of HTML (i.e. adding a class or style to alternate rows in HTML such as <tr class="changeBGcolour"> or <tr style="background-color:grey;">)

I simply want to know if this can be achieved.

Any help regarding this is greatly appreciated,

Thank you.

P.S. I have no control over the text editor

Upvotes: 0

Views: 59

Answers (1)

Robin Whittleton
Robin Whittleton

Reputation: 6339

If you can assume a maximum length of table then you can just write your CSS out longform:

tr { background: grey; }
tr + tr { background: white; }
tr + tr + tr { background: grey; }
tr + tr + tr + tr { background: white; }
tr + tr + tr + tr + tr { background: grey; }
tr + tr + tr + tr + tr + tr { background: white; }
tr + tr + tr + tr + tr + tr + tr { background: grey; }
…

This is going to slow down your CSS pretty quickly so don’t just chuck in 1000 of these to cope with every eventuality, but if you can assume say 20 rows max then it’s workable.

Upvotes: 3

Related Questions