I have a table and I am trying to get a modal to (visually) appear above a column of the table when I click on it.
So far, the best way I have found to "find" the columns of the table is to use the <colgroup> and <col> tags. In order to achieve what I want, I need to be able to put a <div> inside the column. Naively putting the <div> below the <col> tag doesn't work, nor does trying to use the <col> itself as the container.
Does anyone have any suggestions on how to do this? Or alternatively, is there a better way to wrap a column in the table with a <div>?
Thanks!
It is impossible to wrap a column in an element.
<col /> elements exist solely to describe the presentation of a column (and that in a limited way).
The markup structure of a table is purely based on rows. This is a limitation on the nature of HTML as a hierarchal language.
If your goal is to add the element so you can use it with a descendant combinator to select all the cells with CSS/JS, then consider :nth-child instead.