JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>0.1</th>
            <th>0.2</th>
            <th>0.3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Allan, Paul</td>
            <td>-9</td>
            <td>-9</td>
            <td>-9</td>
        </tr>
        <tr>
            <td>Bartlett, James</td>
            <td>-5</td>
            <td>-5</td>
            <td>-5</td>
        </tr>
        <tr>
            <td>Callow, Simon</td>
            <td>-2</td>
            <td>-2</td>
            <td>-2</td>
        </tr>
        <tr>
            <td>Dennis, Mark</td>
            <td>-1</td>
            <td>-1</td>
            <td>-1</td>
        </tr>
        <tr>
            <td>Ennals, Simon</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Finnegan, Seamus</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Goldberg, John</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 13em;
}
th {
    border-bottom: 2px solid #ccc;
    padding: 0.1em 0 0.0em 0;
    font-size: .9em;
}
td {
    border-bottom: 0px solid #ccc;
    padding: 0.1em 0 0.1em 0;
    text-align: center;
}
.abovePlus {
    background-color: #1b7837;
    color: #fff;
}
.above {
    background-color: #7fbf7b;
    color: #000;
}
.high {
    background-color: #d9f0d3;
    color: #000;
}
.at {
    background-color: #ffffff;
    color: #000;
}
.low {
    background-color: #e7d4e8;
    color: #000;
}
.below {
    background-color: #af8dc3;
    color: #000;
}
.belowPlus {
    background-color: #762a83;
    color: #fff;
}

JavaScript

//it is easier to handle with json array
var scale = [{'class': 'abovePlus', 'r1': 20,    'r2': 20}, 
             {'class': 'above',    'r1': 5,    'r2': 6}, 
             {'class': 'high',    'r1': 2,    'r2': 1}, 
             {'class': 'at',    'r1': 0,    'r2': 0}, 
             {'class': 'low',    'r1': -1,    'r2': -2}, 
             {'class': 'below',    'r1': -2,    'r2': -4}, 
             {'class': 'belowPlus',    'r1': -9,    'r2': -9}];
//has three columns with data. skipping first
var column = [
    [0, 1],
    [1, 1],
    [2, 2]
];

$(function () {
    //finds each row
    $("tr").each(function () {
        //in row find each cell (td), but not the first
        $(this).find('td').not(':first').each(function (index) {
            
            var $td = $(this);
            //get score            
            var score = $(this).text();
            
            //moves through a variable
            $.each(scale, function (i, scl) {
                //get class, and value 1 i 2
                var newClass = scl.class;
                var r1 = scl.r1;
                var r2 = scl.r2;
                //get rul for column
                var rule = column[index][1];
                //based on the rules and values, add class to cell (td)
                if (rule == 1 && score < r1) $td.addClass(newClass);
                if (rule == 2 && score < r2) $td.addClass(newClass);

            })

        });

    })
});