Just see the demo table below:

view the Demo : table hover column with pure css

How it works?

This is the Core code.Make div.c:hover::after create a position:absolute element.Then adjust the position and size.

#hoverTb tbody .c:hover:after {
    content:'';
    position:absolute;
    background: rgba(170, 221, 238,1);
    width:100%;
    height:10000px;
    left:0;
    top:-5000px;
    z-index:-1;
}

Why div.c?

the firefox don’t allow td to be position:relative.You can view this example (it works well for chrome,but NOT firefox)

How div.c?

You maybe hate the ugly div class=”c” everywhere.Sure you can use jQuery to add them by code like below.

if(/firefox/.test( window.navigator.userAgent.toLowerCase()) ){
    $('#hoverTb tbody td').wrapInner('<div class="c"></div>')
}

via http://stackoverflow.com/questions/1553571/html-hover-table-column