JSFiddle - React, Tailwind, and code Playground

HTML

<table>
   <tr>
    <th></th><th class="col1">2004</th><th>2005</th><th>2006</th>
   </tr>
   <tbody>
    <tr>
     <td>Рубины</td><td class="col1">43</td><td>51</td><td>79</td>
    </tr>
    <tr>
     <td>Изумруды</td><td class="col1">28</td><td>34</td><td>48</td>
    </tr>
    <tr>
     <td>Сапфиры</td><td class="col1">29</td><td>57</td><td>36</td>
    </tr>
   </tbody>
  </table>

CSS

.hover {
  background-color: #f3bd48;
  color: darkblue;
  font-weight: bold;
  text-align: center;
}
  

  
  
  
  table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   td, th {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid #000; /* Параметры рамки */
   }
   th {
    background: #afd792; /* Цвет фона */
    color: #333;  /* Цвет текста */
   }
   tbody tr:hover {
    background: #f3bd48; /* Цвет фона при наведении */
    color: darkblue;
    font-weight: bold;
    text-align: center;
   }

JavaScript

jQuery(document).ready(function() {
	$('.col1').hover(
  	function(){
  		$('.col1').toggleClass('hover');
  }
  );
});