Responsive Forms & Tables
Forms and tables are notoriously difficult to make responsive. Forms need touch-friendly inputs on mobile, and tables need horizontal scroll or restructuring. These patterns solve both problems professionally.
Responsive Form Patterns
- Full-width inputs - width: 100% with box-sizing: border-box on mobile. Stack vertically
- Touch-friendly inputs - min-height: 44px (Apple's recommendation), font-size: 16px (prevents mobile zoom)
- Grid form layout - display: grid with grid-template-columns for side-by-side fields on desktop
- Label positioning - Labels above inputs on mobile, beside inputs on wide screens
- Scrollable tables - Wrap <table> in a div with overflow-x: auto for horizontal scroll on mobile
- Stacked table rows - At small breakpoints, convert table rows to card-style with display: block
- Input groups - Use flex to keep input + button together at all sizes
Responsive Form Code
/* Responsive form */
.form { display: grid; gap: 16px; }
.form input, .form select, .form textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px; /* Prevents iOS zoom! */
min-height: 44px; /* Touch-friendly */
box-sizing: border-box;
}
/* Two columns on desktop */
@media (min-width: 640px) {
.form { grid-template-columns: 1fr 1fr; }
.form .full-width { grid-column: 1 / -1; }
}
/* Responsive table */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
border-radius: 12px;
}
table { min-width: 600px; /* Ensure minimum width for scroll */ }
/* Alternative: Stacked rows on mobile */
@media (max-width: 640px) {
.stack-table thead { display: none; }
.stack-table td {
display: flex;
justify-content: space-between;
padding: 8px 16px;
}
.stack-table td::before {
content: attr(data-label);
font-weight: 600;
}
}Tip
The font-size: 16px on inputs rule is one of the most important mobile CSS gotchas. iOS Safari auto-zooms any input with font-size < 16px, breaking the user's scroll position. Always set input, select, textarea { font-size: 16px; } as a global rule in your mobile reset.
Mobile-first: start with mobile styles, enhance with min-width media queries
Common Mistake
Using pixel widths on form inputs inside a grid or flex container. Use width: 100% with box-sizing: border-box on all inputs. This ensures inputs always fill their grid cell correctly without overflowing when padding is added.
Practice Task
Build a responsive contact form: (1) Mobile: full-width stacked inputs, labels above, font-size: 16px, min-height: 44px, (2) Desktop 640px+: first-name + last-name side by side using grid-template-columns: 1fr 1fr + grid-column: 1/-1 on email and message, (3) Verify it looks good at both 375px and 1024px.
Quick Quiz
Key Takeaways
- Forms and tables are notoriously difficult to make responsive.
- Full-width inputs - width: 100% with box-sizing: border-box on mobile. Stack vertically
- Touch-friendly inputs - min-height: 44px (Apple's recommendation), font-size: 16px (prevents mobile zoom)
- Grid form layout - display: grid with grid-template-columns for side-by-side fields on desktop