JSFiddle - React, Tailwind, and code Playground

by snuggles08

HTML

Styled table:
<table border="1" class="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
<hr>
Unstyled table:
<table border="1" class="table2">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

CSS

.table td:nth-of-type(1) {
    background: red;
}

.table td:nth-of-type(5) {
    background: blue;
}

.table td:nth-of-type(3) {
    background: green;
}

.table td:nth-of-type(7) {
    background: lime;
}

.table td:nth-of-type(2) {
    background: skyblue;
}

.table td:nth-of-type(4) {
    background: darkred;
}

.table td:nth-of-type(6) {
    background: navy;
}