<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;
}

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

th {
  background-color:#fff;
}

//Row
td:hover::before { 
    background-color: #eee;
    content: '';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -2;        
}

//Column
td:hover::after { 
    background-color: #ffa;
    content: '';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

//Trivial
body {
  margin:8em;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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