JSFiddle - React, Tailwind, and code Playground
HTML
<p>Rule 1: If number is greater than or equal to 200, color red.</p>
<p>Rule 2: If number is less than or equal to 100, color blue.</p>
<table>
<thead>
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
<th>April</th>
<th>May</th>
</tr>
</thead>
<tbody>
<tr>
<td>187</td>
<td>198</td>
<td>98</td>
<td>198</td>
<td>228</td>
</tr>
<tr>
<td>135</td>
<td>80</td>
<td>65</td>
<td>235</td>
<td>73</td>
</tr>
<tr>
<td>312</td>
<td>121</td>
<td>154</td>
<td>175</td>
<td>20</td>
</tr>
</tbody>
</table>
CSS
table {
border-left: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-collapse: collapse;
}
td, th {
padding: 5px;
border-bottom: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
}
th {
background-color: #f1f1f1;
}
JavaScript
$('td').each(function () {
if($(this).text() >= 200) {
$(this).css({'color':'red','font-weight':'bold'});
}
if($(this).text() <= 100) {
$(this).css({'color':'blue','font-weight':'bold'});
}
});