<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
This Pen doesn't use any external CSS resources.