Flipping Tables Displaying Data on Small Screens
summary
Shows how to keep real data tables usable on phones by doing specific things: use semantic markup (caption, thead/tbody/tfoot, th scope and colgroup), rely on CSS table properties like border-collapse and caption-side, and style with :nth-child to zebra‑stripe and target columns. For mobile options she demos shrinking headings, linearizing rows (repeat headers per row), removing less-important columns, enabling horizontal scroll, and a touch/keyboard-accessible toggle at 800px and 480px breakpoints; mentions FooTable and a flexbox-based MDN example.
AI-written summary · about
chapters (9)
- 0:00The frustration of tables
- 1:34When to use a table
- 4:26Avoiding tables for layout
- 7:19Semantic HTML structure
- 9:17Styling for readability
- 13:14CSS table techniques
- 17:03Responsive table strategies
- 20:28Case study and implementation
- 23:45Summary and conclusion
related talks
39mCutting-Edge Responsive Web Design
49mPanel 4: Responsive Layout
33mCutting-Edge Responsive Web Design
05mLeveraging CSS to Make Shiny Mobile-Responsive
53mDeveloping Mobile Friendly Web Apps with React and Bootstrap
43mModern CSS Layout is Awesome!
34mCSS In Your Pocket - Mobile CSS Tips From The Trenches
54mFlexbox