6

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?

balteo
  • 23,602
  • 63
  • 219
  • 412

1 Answers1

7

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

Mo.
  • 26,306
  • 36
  • 159
  • 225
  • Thanks. Do you know a way to have the same behavior applied to the current column as well as the current row? – balteo Mar 05 '14 at 09:42
  • @balteo I don't think it is possible without using javascript. Because CSS doesn't provide any option to idendify exact column :(. You can use some few amount scripting solution something like this http://css-tricks.com/row-and-column-highlighting/ – Mo. Mar 05 '14 at 09:50
  • Umm. I did find something on here: http://stackoverflow.com/questions/848840/cols-colgroups-and-css-hover-psuedoclass with its corresponding fiddle: http://jsfiddle.net/ThinkingStiff/rUhCa/ but it is not responsive at all and does not integrate with bootstrap... – balteo Mar 05 '14 at 09:55
  • Which leads me to think that a pure-css solution is possible. – balteo Mar 05 '14 at 10:07
  • @balteo do you have any IE requirement for it ? – Mo. Mar 05 '14 at 10:28
  • @balteo Then I would suggest use `:nth-child()` to detect column number and declare a unique css for that column :) – Mo. Mar 05 '14 at 10:37
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49042/discussion-between-bboymaanu-and-balteo) – Mo. Mar 05 '14 at 10:39
  • @balteo please have a look updated answer hope that should be useful for you – Mo. Mar 05 '14 at 10:41
  • @balteo use the logic which used in **demo** not exact code because the code quickly made one ;) – Mo. Mar 05 '14 at 10:53
  • 1
    i thought table-responsive class must be used for table tag, but after read this then only know that i can put it to the parent div of the table, it solved the problem of extra one column if putting table-responsive and table-bordered in the table tag – V-SHY Jan 17 '19 at 08:24