<div class="container">
      <table class="table">
        <tr>
          <td>1</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>2</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>3</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
         <tr>
          <td>4</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
         <tr>
          <td>5</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
         <tr>
          <td>6</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>

const start = () => {
        const table = document.querySelector('.table');
        table.style.color = "#fff";
        const tableTr = table.querySelectorAll('tr');
        const tableTrLength = tableTr.length;
        const step = Math.floor(200 / tableTrLength); //0-255 от 55 темно зеленый, ниже почти черный, по этому промежуток 255-55.
        let green = 255;
  
        tableTr.forEach(function(e){
          green -= step;
          const firstChild = e.children[0];
          firstChild.style.backgroundColor = `rgb(0,${green},0)`;
        });

      }
      document.addEventListener("DOMContentLoaded",start);