<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12"> <main> <table class="table table-bordered table-condensed"> <thead> <tr> <th></th> <th class="col">50kg</th> <th class="col">55kg</th> <th class="col">60kg</th> <th class="col">65kg</th> <th class="col">70kg</th> </tr> </thead> <tbody> <tr> <th class="row">160cm</th> <td>20</td> <td>21</td> <td>23</td> <td>25</td> <td>27</td> </tr> <tr> <th class="row">165cm</th> <td>18</td> <td>20</td> <td>22</td> <td>24</td> <td>26</td> </tr> <tr> <th class="row">170cm</th> <td>17</td> <td>19</td> <td>21</td> <td>23</td> <td>25</td> </tr> <tr> <th class="row">175cm</th> <td>16</td> <td>18</td> <td>20</td> <td>22</td> <td>24</td> </tr> <tbody> </table> </main> </div> </div> </div>

table { overflow: hidden; } td, th { padding: 10px; position: relative; outline: 0; } body:not(.nohover) tbody tr:hover { background-color: #ffa; } td:hover::after, thead th:not(:empty):hover::after, td:focus::after, thead th:not(:empty):focus::after { content: ''; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; } td:hover::after, th:hover::after { background-color: #ffa; } td:focus::after, th:focus::after { background-color: lightblue; } /* Focus stuff for mobile */ td:focus::before, tbody th:focus::before { background-color: lightblue; content: ''; height: 100%; top: 0; left: -5000px; position: absolute; width: 10000px; z-index: -1; }

$('td').hover(function() { $(this).parents('table').find('col:eq('+$(this).index()+')').toggleClass('hover'); });