JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr><td>1</td></tr>
  <tr><td>1</td></tr>
  <tr><td>1</td></tr>
</table>

<table>
  <tr><td>1</td><td>1</td><td>1</td></tr>
  <tr><td>1</td><td>1</td><td>1</td></tr>
  <tr><td>1</td><td>1</td><td>1</td></tr>
  <tr><td>1</td><td>1</td><td>1</td></tr>
</table>

<table>
  <tr><td>1</td></tr>
  <tr><td>1</td></tr>
  <tr><td>1</td><td>1</td><td>1</td></tr>
  <tr><td>1</td></tr>
  <tr><td>1</td></tr>
  <tr><td>1</td></tr>
  <tr><td>1</td></tr>
  <tr><td>1</td><td>1</td><td>1</td></tr>
  <tr><td>1</td></tr>
</table>

CSS

table {
  margin: 1em;
  border: solid 2px gray;
  float: left;
}
td {
  border: solid 1px gray;
}
.num1 {
  color: red;
}

JavaScript

[].forEach.call(document.querySelectorAll('table'), tbl => {
    var rows = tbl.querySelectorAll('tr')
    for (var i  = 0; i < 4 && i < rows.length; i++) {
      [].forEach.call(rows[i].querySelectorAll('td'), cell => {
      	cell.innerHTML = '<div class="num1 link">1</div>'
      })
    }
})