I selected this concept to show a way of creating responsive elements with CSS and some jQuery code. The plugin we are about to create in this chapter is inspired by the CSS-tricks example of reformatting a table with CSS into a vertical layout (as demonstrated at http://css-tricks.com/examples/ResponsiveTables/responsive.php). Our plugin will go a little further and will convert the table into an accordion type element. We start by stacking table cells vertically by converting rows, cells, and the table body to block elements inside the media query as follows:
@media screen and (max-width: 820px) { table.responsive td, table.responsive tr, table.responsive, table.responsive tbody { display: block; }
We don't need the column headers (with the field names) in the accordion, so let's hide those with the following code statement:
table.responsive th{ display: none; }
Instead of the <th>
headers at the top of the table, we will...