How can I create a table in Webflow that looks good on both desktop and mobile devices?
TL;DR
- Use Div blocks with CSS Grid or Flexbox instead of HTML tables for full styling and responsiveness control.
- Manually build the table with wrapper, row, and cell Divs, and define grid columns.
- Adapt for mobile by stacking content or enabling horizontal scroll with overflow-x: auto and setting a min-width.
- Style elements using Webflow classes and text elements, and test across all breakpoints for responsive design.
To create a responsive table in Webflow, you need to build it using div blocks and text elements instead of native HTML tables, as this provides far more control for styling and responsiveness.
1. Use CSS Grid or Flexbox Instead of HTML Table
- Avoid using embed elements for raw
<table>HTML, as they are hard to style and make responsive. - Use a Div Block as the table container and apply CSS Grid or Flex properties to manage layout.
2. Build the Table Structure Manually
- Add a Wrapper Div (
Table Wrapper) and set Display: Grid. - Use child Divs for each Row, and within that, add Divs for each Cell.
- Define the grid columns either in the wrapper or per row: example,
grid-template-columns: 1fr 2fr 1fr.
3. Make It Responsive for Mobile
- Switch to mobile viewports in the Webflow Designer.
- Modify the grid to become more stacked or scrollable:
- Option A: Vertical Stack – Change grid layout to vertical column and show each row as a block.
- Option B: Horizontal Scroll – Keep the grid layout and make the table scrollable:
- Set the wrapper's overflow-x to auto.
- Set a min-width (e.g. 720px) on the inner table so it doesn’t collapse on small devices.
4. Style the Table Elements
- Add common styles like borders, padding, font weight for headers, and background color.
- Use Text Block or Text span elements inside cells for content.
- Use Webflow classes to style headers and data rows differently.
5. Alternative for Small Data Sets: Rich Text + Flexbox
- For simple tables (like 2-column price lists), you can use a Rich Text Block, then apply Flexbox styling inside.
- Or use Columns, though Columns are limited in flexibility compared to Grid.
6. Test Across Viewports
- Use Webflow’s built-in Breakpoints to test on mobile, tablet, and desktop.
- Adjust fonts, spacing, and layout per device.
Summary
To create a responsive table in Webflow, build it using CSS Grid with Div blocks, not raw HTML. This allows full control over layout and styling across screen sizes. For mobile, either stack rows vertically or enable horizontal scrolling with overflow-x: auto.