Question:
How do I make Wix table headers sticky using CSS?
Product:
Wix Studio
What are you trying to achieve:
I’ve been making custom tables in HTML & CSS and then embedding them into iFrames in Wix for a long time. Unfortunately, this isn’t good for SEO because the table content isn’t actually on the website.
Because of this, I’m working on converting all of my tables over to actual Wix tables with a few usability requirements:
- The tables are long and therefor must be scrollable
- When scrolling, the header should be sticky.
What have you already tried:
I’m using the table tool in Wix: Layout tools → Tables
All of my tables need the same CSS, so I’ve added global CSS to my website using devmode. This is working properly with the Wix table except that the header is not sticky. I’m able to scroll, the header text-transform has worked, but the header is not sticky.
Global CSS shown below.
.table__header {
position: sticky;
top: 0;
text-transform: uppercase;
}
.table {
border: 1px #000000 solid;
overflow: auto;
min-height: auto;
max-height: 500px;
}