CSS Tables
Table structure, zebra rows, sticky headers, and responsive overflow strategies.
Introduction to CSS Tables
Theory: Table styles should prioritize readability and data comparison. Header contrast, row spacing, and responsive behavior are essential.
What You'll Learn:
Learn table layout styling, borders, zebra rows, sticky headers, and responsive table patterns.
Table Styling Basics
Theory: Table styles should prioritize readability and data comparison. Header contrast, row spacing, and responsive behavior are essential.
Basic Table CSS:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #e5e7eb;
padding: 0.75rem;
text-align: left;
}
th { background: #f8fafc; }Zebra Rows and Hover
Theory: This topic explains practical CSS concepts used in real interfaces. Understanding the theory helps you choose the right properties and patterns.
Zebra + Hover:
tbody tr:nth-child(even) {
background: #f8fafc;
}
tbody tr:hover {
background: #eef6ff;
}Sticky Header Tables
Theory: Table styles should prioritize readability and data comparison. Header contrast, row spacing, and responsive behavior are essential.
Sticky Head Example:
.table-wrap {
max-height: 320px;
overflow: auto;
}
thead th {
position: sticky;
top: 0;
background: #0f172a;
color: #fff;
}CSS Tables Best Practices
Theory: Table styles should prioritize readability and data comparison. Header contrast, row spacing, and responsive behavior are essential.
- Use sufficient padding for readability.
- Maintain strong header contrast.
- Add horizontal scroll for small screens.
- Avoid overly dense tables without grouping.
Extended Tutorial: Responsive Tables
Theory: Wide tables overflow small screens. Patterns: horizontal scroll wrapper, stacked “card” rows via display changes, or hiding low-priority columns under breakpoints.
Example: Scroll container
.table-responsive-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
table.data { min-width: 720px; border-collapse: collapse; width: 100%; }
th, td { padding: 0.6rem 0.75rem; text-align: left; }
thead { background: #f8fafc; }Tables MCQ Test
Practice tables concepts with 15 interview-style multiple choice questions.
Tables Interview Questions
Prepare for tables interviews by focusing on structure, practical usage, and maintainable styling patterns.
Basic Interview Q&A
- What is Tables in CSS?Tables focuses on structured, readable styling patterns that scale in real projects.
- Why is structure important?Good structure reduces bugs, improves collaboration, and makes updates easier.
- How do selectors affect structure?Selector strategy controls reusability and override complexity.
- What is maintainable CSS?Maintainable CSS is modular, readable, and easy to extend without regressions.
- When should you split files?Split when features/components grow, so each file has a clear responsibility.
- How does naming improve clarity?Consistent naming makes components predictable and easier to debug.
- What is cascade awareness?Understanding cascade helps you avoid accidental overrides and style leaks.
- Why avoid over-specific selectors?Over-specific selectors are hard to override and increase maintenance cost.
- How do utility classes help?Utilities provide quick, reusable single-purpose styles.
- What is a good interview answer style?Give a clear definition first, then one practical implementation example.
Advanced Interview Q&A
- How do cascade layers improve architecture?
@layerdefines priority explicitly, reducing conflicts across modules. - How do container queries help component design?They make components responsive to their parent size, not only viewport size.
- What causes specificity debt?Chained selectors and frequent overrides create brittle style systems.
- How do you optimize CSS delivery?Minify, remove unused styles, and inline critical CSS where useful.
- How do design tokens scale teams?Tokens enforce consistency and simplify theme updates across products.
- When is utility-first strategy appropriate?It works well when rapid UI composition and consistency are priorities.
- How do you benchmark CSS performance?Audit render cost, style recalculations, and layout shifts with DevTools.
- How do you refactor legacy CSS safely?Refactor in slices, add visual regression checks, and remove dead rules gradually.
- What are paint-friendly transitions?Prefer transform/opacity over layout-triggering properties for smooth animation.
- How do you maintain accessibility while styling?Preserve focus visibility, contrast, semantic intent, and non-color indicators.