Responsive Table

Name
Avatar
Email
Website
Tom
tom@home.com
www.toms-site.com
Name
Avatar
Email
Website
Dick
dick@home.com
www.dicks-site.com
Name
Avatar
Email
Website
Harry
harry@home.com
www.harrys-site.com

Responsive-Table

The table displays vertically on small screens.

If more rows are wanted, reduce the width to below the breakpoints (or deactivate the breakpoins, then you can set it wider), and duplicate the container .inside-holder as many times as you need.

Expanding the number of columns is a bit more complicated. You would need to also start at the narrow view, and then add cells to the units .unit-left and .unit-right. In wide view it would also be necessary to change the width of all the cells of each row, so that it adds up to 100%.

Placeholder Picture

Download this component