Responsive Tables

Tables overflow on small screens. Wrap them in a scrollable container, or reformat rows as stacked cards using data attributes.

Example

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Stack approach */
@media (max-width: 600px) {
  thead { display: none; }
  td { display: block; text-align: right; }
  td::before { content: attr(data-label); float: left; font-weight: 700; }
}

CSS

Full Editor

Pro Tip

The data-label technique keeps data readable without JavaScript.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned