Kevin Powell - CommunityKP-C
Kevin Powell - Community16mo ago
190 replies
Alex

Styling cells that span multiple rows

I'm attempting to build a timetable using HTML tables and apply a class that visually indicates the current event using a bit of js.

Each row represents 30 minutes, and different events last for different amounts of time.

I've worked out how to apply the styles to cells in a given row, and worked out some logic for selecting the right <tr> based on the current time, but longer events span multiple rows and only receive the styling while the first 30-minute chunk (i.e. the row that the cell starts in) has the class applied.

Is there any way to apply a class/style to a cell by applying styles to one of the rows it spans? If not, any advice on the cleanest way to apply styles to those cells? Right now, the best I can come up with is putting a data attribute on every cell for the time window its in and comparing it to the current time, which feels a bit ridiculous.

Thanks!

https://codepen.io/Beanie127/pen/dyxXyLO
Was this page helpful?