Tables are the only elements you need to fight hard for to make them adapt to screen resolution. We do have some excellent inventions on web to make our data tables responsive, but I have a rather simple approach to deal with the tables and I’m going to share that here.

This post doesn’t advocate how the table views should be changed on different resolution. It aims at how to stop the tables from breaking your layouts.

The Idea

The layout of an HTML table is variable, it can be anything depending on the use. It could be short. Or tall. With multiple rows and columns spanning.

If one decides to break the table columns into blocks on smaller screen, the table won’t make any sense; as all the labeling and line-up would be messed up.

At last, you are left with leaving the layout of your table as it is.

But, you may make your table adapt according to the flow with only the CSS.

The CSS

The below given styles make the tables to automatically self-contain themselves, and a scrollbar within the table will appear when they start to overflow the parent element.

table {
  border-collapse: collapse;
  border-width: 0;

  /* Making the table self-contain itself on overflow */
  display: block;
  overflow: auto;
}

td,
th {
  /* Spacing and border for Table cells */
  border: 1px solid;
  padding: .5em 1em;
}

In the above code, we optimized our table to kind-of self-contain itself when an overflow happens. Table cells, the building blocks of our table, are decorated a bit to give table a structure (eg. spacing and border).

Check out the demo and resize the browser window. I’ll advice you to check it on a mobile device or switch to the responsive design mode in your browser.

See the Live Demo

Further, you may also give a max-height to the taller tables to facilitate vertical scrolling within the table itself, the demo shows the taller table example too. Let me know what you think of it.