JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<table class="tabstyle1" width="600" border="2" align="center"   cellpadding="0" cellspacing="0">
  
  <tr>
    <th scope="col">№</th>
    <th scope="col">Название</th>
    <th scope="col">Утром</th>
    <th scope="col">Обед</th>
    <th scope="col">Вечером</th>
  </tr>
  <tr>
    <td>1</td>
    <td>некий текст</td>
    <td>некий текст</td>
    <td>некий текст</td>
    <td>некий текст</td>
  </tr>
  <tr>
    <td>2</td>
    <td>некий текст</td>
    <td>некий текст</td>
    <td>некий текст</td>
    <td>некий текст</td>
  </tr>
  <tr>
    <td>3</td>
    <td>некий текст</td>
    <td>некий текст</td>
    <td>некий текст</td>
    <td>некий текст</td>
  </tr>
</table>

CSS

.tabstyle1 {
      border: 5px ridge #73766f; 
      border-collapse: collapse;
}               
tr:hover td{
    background:red;
}

tr:hover td:first-child{
    background:inherit;;
}
.tabstyle1 thead, th {
      background: -webkit-linear-gradient(top right, #b8b9b1, #fff); /* для webkit-браузеров */
      background: -moz-linear-gradient(top right, #b8b9b1, #fff); /* для firefox 3.6+ */ 
      background: -o-linear-gradient(top right, #b8b9b1, #fff); /* для Opera 11.10+ */
      background: -ms-linear-gradient(top right, #b8b9b1, #fff); /* для IE10+ */
      text-align: center; 
      vertical-align: text-top;
      padding:10px;
      border-bottom: 3px ridge #73766f;
      border-left: 1px solid #73766f; 
      border-collapse: collapse;
} 

.tabstyle1 td, tr {
      text-align:left;
      vertical-align: text-top;
      padding:10px;
      border: 1px solid #73766f;
      border-collapse: collapse;
      background: #fff;
}