Using CSS and Bootstrap 3 to highlight the current row and column of an html table

Question

I would like to be able to use Bootstrap 3 or plain css to highlight the current hovering row and column of the html table .

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

Can anyone provide tips and / or links?

Answer 1

Add .table-hoverto enable hover state in table rows

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

div .table-responsive

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

UPDATE

:nth-child() :hover

demo http://jsfiddle.net/kGz9E/

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

Answer 2

*** bootstrap-3.3.7 ***

You are using *bootstrap.min.css* or *bootstrap.css*.

1.Open *bootstrap.min.css* or *bootstrap.css* 
  that you include with *link tag* in your html file.


2.Find the code below in *bootstrap.min.css* or *bootstrap.css* 
  whose class name is *table-hover*.

.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}

3.Paste the new code below after the above code 
  whose class name is *table-hoverCell*.

.table-hoverCell > tbody > tr > td:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}

4.The final appearance is like this

.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
.table-hoverCell > tbody > tr > td:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}

*** I use *bootstrap.css* for this explanation 
    so final appearance is different from *bootstrap.min.css*. 
    The code in *bootstrap.min.css* is written without any linebreaks 
    so you can easily do find and paste using *bootstrap.css*. ***