Streaming live at 10am (PST)

Fixed position inside of a table?

So I have a table and you can scroll inside of the table. I want the header of the table (where all the titles are) to stay in place while the user can continue to scroll through the table. Suggestions?

Hi @daks, are you creating the table as a series of DIVs, or are you using html table code in an embed widget? Depending the method you use, will determine your options :smile:

Cheers, Dave

Columns inside of a DIV block.

One div with a row for the header, one div underneath with the row widgets containing all table rows, with a fixed height and set to overflow:scroll or auto? Check what issues this bring with the lowest breakpoints though.

2 Likes

@vincent made a great suggestion. Here is a small demo I made doing exactly what he recommended: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb Click on the page titled “Div Table” to check it out.

Hope this helps! :slight_smile: And don’t hesitate to make a request for a demo in the demo kit here: List of interactive demos for common designs, interactions, and layouts

1 Like