Using CSS and Bootstrap 3 in order to highlight the currently hovered-on row and column of a html table

Question

I would like to be able to use Bootstrap 3 or/and plain css in order to highlight the currently hovered-on row and column of a html table.

Is this possible without using custom javascript and keeping the responsiveness of Bootstrap tables?

Can anyone please provide advice and/or links?

Answer 1

Add .table-hover to enable a hover state on table rows

<table class="table table-hover">
  ...
</table

Create a parent div with class .table-responsive to responsiveness

<div class="table-responsive">
  <table class="table table-hover">
    ...
  </table>
</div>

UPDATE

Solution with :nth-child() to identify :hover column number

demo http://jsfiddle.net/kGz9E/

Reference: http://getbootstrap.com/css/#tables