How can I create a table in Webflow that looks good on both desktop and mobile devices?
TL;DR
- Build the table using Div Blocks arranged with Flexbox or Grid, placing Row Divs inside a Parent Div and Cell Divs within each row.
- Style for desktop with padding, borders, and row/background differentiation, then adapt for mobile by stacking rows vertically, converting to card-style layout, or enabling horizontal scrolling as needed.
To create a responsive table in Webflow that looks good on both desktop and mobile, use a combination of div blocks, grid or flexbox layouts, and custom styling.
1. Use Div Blocks Instead of HTML Table Elements
- Webflow does not support native HTML table elements, so you need to build tables using div blocks.
- Create a Parent Div Block that will act as the table container.
- Inside it, nest Row Divs, one for the header row and each table row.
- Within each row, nest Cell Divs to hold individual data items.
2. Use CSS Grid or Flexbox for Layout
- Set the parent of each row to display: flex or display: grid.
- For a table with equal-width columns, use grid with fixed or fractional columns:
- Example: Set columns to 1fr 1fr 1fr for three equal columns.
- For Flexbox, assign each cell a percentage width (e.g., 33.33% for three columns).
3. Style for Desktop
- Set fixed padding, border, and typography for header and data cells.
- Use font-weight: bold for header cells to distinguish them.
- Apply background colors to alternate rows for clearer differentiation.
4. Optimize for Mobile Devices
- On tablet and mobile breakpoints, stack cells vertically:
- Change row direction to vertical using Flexbox (
flex-direction: column) or switch to a column layout. - Alternatively, use a card-style layout:
- Each row becomes a card with cells appearing as label–value pairs.
- Add a Label Text Span (e.g., “Price:”) before the value for clarity.
- Hide the header row on mobile if using stacked cards.
5. Use Overflow Scrolling (Optional)
- If horizontal scrolling is acceptable, wrap the entire table in a div with
overflow-x: auto. - This avoids stacking but keeps the horizontal format on smaller screens.
6. Use Webflow’s Grid for Simpler Tables
- For smaller tables (2–4 columns), use Webflow’s Grid layout:
- Place all items in individual grid cells.
- Adjust grid layout per breakpoint for responsiveness.
Summary
To build a responsive table in Webflow, use Div Blocks with Grid or Flexbox, style rows and cells appropriately, and reorganize or stack the layout at mobile breakpoints. For better UX on mobile, consider card-style formatting or enable horizontal scrolling.