How can I create a fixed-size grid/table in Webflow that remains 940px across all device sizes and enables side-scrolling for overflow on small devices?
TL;DR
- Add a full-width wrapper div with horizontal scroll enabled to contain the table.
- Inside the wrapper, add a fixed 940px-wide container and build your table or grid layout within it.
- Optionally, enable touch scrolling for smoother mobile interaction.
To create a fixed-size grid or table in Webflow that's 940px wide on all devices and enables horizontal scrolling on smaller screens, follow these steps:
1. Create a Wrapper Div with Overflow Scroll
- Add a new Div Block to your page and name it something like "Table Wrapper".
- In the Style panel, set the following:
- Width: 100%
- Max-Width: 100%
- Overflow-X: Scroll
- Overflow-Y: Hidden
This ensures the wrapper takes the full width of the screen but scrolls horizontally if contents overflow.
2. Add a Fixed-Width Inner Container for the Table
- Inside the "Table Wrapper", add another Div Block and call it "Table Container".
- Style the "Table Container" with:
- Width: 940px
- Min-Width: 940px
This locks the content width at 940px regardless of the device size.
3. Build Your Table or Grid Layout Inside the Fixed Container
- Add a Collection List, Grid, or custom Div Blocks inside the "Table Container".
- Style these as needed to represent rows and columns.
- Ensure widths of internal elements align with the 940px layout for consistent presentation.
4. Enable Smooth Touch Scrolling (Optional)
- Select the "Table Wrapper" and in the Style panel, set:
- Overflow-X: Scroll
- Set the
Webkit Overflow Scrollingproperty to Touch (if available). - This improves the scrolling experience on mobile devices.
---
Summary
Create a 100% width wrapper with horizontal scroll, place a fixed 940px-wide inner container inside it, and build your grid or table in that container. This setup ensures the table stays 940px wide and horizontally scrolls on smaller devices.
