Responsive Tables

This responsive table solution uses pure CSS and doesn't eliminate any table data as the screen narrows.

All tables automatically have even/odd striping and expand to 100% of the screen width. As the viewport narrows, table headings are hidden and table data cells behave more like block elements. Because the original horizontal table headings are hidden, they have to be rendered through CSS psuedo elements. Each table that requires different headings will have its own class and entries in responsive.css.

Table Example One
Heading One	Heading Two	Heading Three
The table is given a class. Nothing is needed in the common.css file	In the responsive.css file, at max width 48em, add the entries for each table heading.	See responsive.css for full code. `.tableclass1 td:nth-of-type(1):before {content: "Heading1";} ...and so on.`
The table is given a class. Nothing is needed in the common.css file	In the responsive.css file, at max width 48em, add the entries for each table heading.	See responsive.css for full code. `.tableclass1 td:nth-of-type(1):before {content: "Heading1";} ...and so on.`
The table is given a class. Nothing is needed in the common.css file	In the responsive.css file, at max width 48em, add the entries for each table heading.	See responsive.css for full code. `.tableclass1 td:nth-of-type(1):before {content: "Heading1";} ...and so on.`

Table Example Two
Heading One	Heading Two	Heading Three	Heading Four	Heading Five
An example of a table with five columns	An example of a table with five columns	An example of a table with five columns	An example of a table with five columns	An example of a table with five columns
An example of a table with five columns	An example of a table with five columns	An example of a table with five columns	An example of a table with five columns	An example of a table with five columns
An example of a table with five columns	An example of a table with five columns	An example of a table with five columns	An example of a table with five columns	An example of a table with five columns

I understand this topic! Go to Forms