html table hover,javascript - html: hover table column - Stack Overflow

This can be done using CSS with no Javascript.

I used the ::after pseudo-element to do the highlighting. z-index keeps the highlighting below the in case you need to handle click events. Using a massive height allows it to cover the whole column. overflow: hidden on the

Output:

CSS:

table {

border-spacing: 0;

border-collapse: collapse;

overflow: hidden;

z-index: 1;

}

td, th {

cursor: pointer;

padding: 10px;

position: relative;

}

td:hover::after {

background-color: #ffa;

content: '\00a0';

height: 10000px;

left: 0;

position: absolute;

top: -5000px;

width: 100%;

z-index: -1;

}

HTML:

	50kg	55kg	60kg	65kg	70kg
160cm	20	21	23	25	27
165cm	18	20	22	24	26
170cm	17	19	21	23	25
175cm	16	18	20	22	24