O'Reilly logo

Responsive Web Design with jQuery by Gilberto Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 7. Designing Responsive Tables

The HTML element table can be quite wide to be able to show a structured content. Sometimes the entire row of data needs to be kept along to make sense in a table. Tables can flex by default, but if they get too narrow, cell content will begin to wrap; this is often not very cleanly done!

Garrett Dimon mentioned an interesting topic about the difficulty of adjusting table width accommodating different screen sizes and ensuring the sense in content of the table:

"Data tables don't do so well with responsive design. Just sayin'."

In this chapter, we will learn four different approaches to create responsive tables:

  • Expandable responsive tables
  • Stacked tables
  • Horizontal overflow
  • Link to full-table

Responsive tables

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required