Flat HTML table CSS styling

In this tutorial we show you how to create a flat table with HTML and CSS. In addition we make the table vertically scrollable so that it can be used in responsive design for smaller viewports.

Demo

Head 1	Head 2	Head 3
Example 1	Example 2	Example 3
Example 4	Example 5	Example 6

HTML

CSS

When the viewport is smaller than the table the table will adjust its width and the content of the table will become vertically scrollable. This works because of the following properties: width: auto; overflow: auto; display: block;