How to highlight cells/rows/columns in one table as matching cells/rows/columns in another table are highlighted - cont'd

Hi to all,

Please see previous post:

Firstly, thank you again to all who helped thus far - I have more questions to ask, if that’s okay…

I hope this doesn’t seem too weird but I would like the tables to behave as follows (while retaining the existing functions): Please see the linked html/css files (note: the css file ref is commented out)

Table 2: The top row is currently a row header.

I would like it if I could hover over the header row’s cells and doing so causes the related column to highlight (including the header cell) as the header cells are hovered over.

And, clicking a header cell causes the column below to become highlighted (selected) until clicked again.

Also, it would be great if Table 2 could be horizontally scrollable, but as the table scrolls L/R the header row and the highlighting of any selected column(s) doesn’t scroll; e.g. if columns 4, 6 and 7 are selected (by clicking those header cells), then as you scroll L/R, those columns remain selected (highlighted) as the table’s data scrolls L/R (i.e. columns 4, 6 and 7 remain highlighted, until those header cells are clicked again).

Sorry if that’s a lot to ask. I am trying to make a sort of educational puzzle. I have tried to figure this out myself but am getting nowhere.

If any of it can be done using CSS that would be interesting (Please see css example link).

Any help would be greatly appreciated. Thank you very much for your time.

All the best,


index-1.html (4.7 KB) screen-1.css (1.1 KB)

scrolling css example:
index-scroll.css (822 Bytes) index-scroll.html (3.0 KB)