![]() When there was a horizontal scroll I had to translate the non-sticky table of columns over in the opposite direction of the scroll to fake the horizontal scroll. The “table header” was actually two tables in a div with overflow hidden. The only way I could get it to work was to combine 4 tables and make it look like one. They wanted the header to be sticky and the first column to be sticky. I had a table with any number (from 5 to 30+) of columns. Fortunately, there are a variety of ways, all depending on the best way to group and explore the data in them. I was imagining colored header bars separating players on different sports teams or something.Īnytime I think about data tables, I also think about how tricky it can be to make them responsive. It’s probably a bit weird to have table headers as a row in the middle of a table, but it’s just illustrating the idea. Sticky Table Headers with CSS by Chris Coyier ( CodePen. You can go that route, but need to be really careful to re-apply semantic roles.Īnyway, none of that matters if you just stick (get it?!) to using a sticky value on those elements. The first is dangerous because you aren’t using semantic and accessible elements for the content to be read and navigated.
0 Comments
Leave a Reply. |