JSFiddle - React, Tailwind, and code Playground
by Kenneth Luplau-Brøgger
HTML
<table width="200" border="1" id="myTable">
<tr>
<th rowspan="2" scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
SCSS
.dark{
background-color: blue;
}
td, th, table {
border: none;
}
td {
background: grey;
}
tr:nth-child(even) {
td {
border-bottom: 3px solid blue;
}
}
JavaScript 1.7
const $rows = document.querySelectorAll("tr");
const $tds = document.querySelectorAll("td, th");
$rows.forEach(($row, i) => {
if (i % 2 === 0) {
$row.querySelector("td").classList.add("dark");
}
})