<table>
    <tr>
      <th>Size</th>
      <th>xxs</th>
      <th>xs</th>
      <th>s</th>
      <th>m</th>
      <th>l</th>
      <th>xl</th>
    </tr>
  <tr>
    <th>neck</th>
    <td>14</td>
    <td>14.5</td>
    <td>15</td>
    <td>15.5</td>
    <td>16</td>
    <td>16.5</td>
  </tr>
  <tr>
    <th>chest</th>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
  </tr>
  <tr>
    <th>length</th>
    <td>26.5</td>
    <td>27</td>
    <td>27.5</td>
    <td>28</td>
    <td>28.5</td>
    <td>29</td>
  </tr>
  <tr>
    <th>waist</th>
    <td>17.5</td>
    <td>18.5</td>
    <td>19.5</td>
    <td>20.5</td>
    <td>21.5</td>
    <td>22.5</td>
  </tr>
  <tr>
    <th>sleeve</th>
    <td>32.75</td>
    <td>33</td>
    <td>33.25</td>
    <td>33.5</td>
    <td>33.75</td>
    <td>34</td>
  </tr>
</table>
* {
  box-sizing: border-box;
}

table {
  overflow: hidden;
  display: inline-block;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #999;
  margin: 0;
  padding: 10px;
  position: relative;
}

th {
  background-color: #fff;
}

td:hover::before {
  background-color: red;
  content: "";
  height: 100%;
  left: -5000px;
  position: absolute;
  top: 0;
  width: 10000px;
  z-index: -2;
}

td:hover::after {
  background-color: green;
  content: "";
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  mix-blend-mode: lighten;
  width: 100%;
  z-index: -1;
}

body {
  margin: 8em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js