CSS подсветка строки или столбца в таблице

by Alexey Demin

HTML

<table>
  <thead>
    <tr>
      <th></th>
      <th class="col">понедельник</th>
      <th class="col">вторник</th>
      <th class="col">среда</th>
      <th class="col">четверг</th>
      <th class="col">пятница</th>
      <th class="col">суббота</th>
      <th class="col">воскресенье</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="row">10:00</th>
      <td>as</td>
      <td>adc</td>
      <td>aas</td>
      <td>asd</td>
      <td>asd</td>
      <td>asd</td>
      <td>asd</td>
    </tr>
    <tr>
      <th class="row">11:00</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th class="row">12:00</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th class="row">13:00</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th class="row">14:00</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th class="row">15:00</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th class="row">16:00</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th class="row">17:00</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th class="row">18:00</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th class="row">19:00</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
   ...

CSS

table {
  border-collapse: collapse;
  overflow: hidden;
  z-index: 1;
  font-family: monospace;
}

th {
  background-color: #39464E;
  color: white;
}

td, th,
.row, .col {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
  position: relative;
}


/* Подсветка строки */
td:hover::before,
.row:hover::before {
  background-color: rgba(0, 0, 180, 0.2);
  content: '\00a0';
  height: 100%;
  left: -5000px;
  position: absolute;
  top: 0;
  width: 10000px;
  z-index: -1;
}

/* Подсветка столбца */
td:hover::after,
.col:hover::after {
  background-color: rgba(0, 0, 180, 0.2);
  content: '\00a0';
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  width: 100%;
  z-index: -1;
}