Question: Im trying to highlight entire column in table on hover. 

Can someone help me how I can achieve this in angular2+

I need exactly like the below image

[![enter image description here](https://i.stack.imgur.com/EoIhM.png)](https://i.stack.imgur.com/EoIhM.png)

reference image

Answer: 
You can use :before and :after

```
td:hover::before {
    background-color: #ffa;
    content: '';
    height: 100%;
    left: -5000px;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: -2;
}

td:hover::after {
    background-color: #ffa;
    content: '';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

```

Full working example in Fiddle:
<https://jsfiddle.net/0vm7pkj4/1/>
Try to use hover effect through your table Class, hope this would help

```
.MyTable td:hover {
   background-color: #ccc;
}

```