Brilliant responsive trick for data tables, when you have no choice but to use them.
HTML
Statement Summary
| Account |
Due Date |
Amount |
Period |
| Visa - 3412 |
04/01/2016 |
$1,190 |
03/01/2016 - 03/31/2016 |
| Visa - 6076 |
03/01/2016 |
$2,443 |
02/01/2016 - 02/29/2016 |
| Corporate AMEX |
03/01/2016 |
$1,181 |
02/01/2016 - 02/29/2016 |
| Visa - 3412 |
02/01/2016 |
$842 |
01/01/2016 - 01/31/2016 |
CSS
table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; }
table caption { font-size: 1.5em; margin: .5em 0 .75em; }
table tr { background: #f8f8f8; border: 1px solid #ddd; padding: .35em; }
table th,
table td { padding: .625em; text-align: center; }
table th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; }
@media screen and (max-width: 600px) { //use whatever breaks work in your theme
table { border: 0; }
table caption { font-size: 1.3em; }
table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
table tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; }
table td { border-bottom: 1px solid #ddd; display: block; font-size: .8em; text-align: right; }
table td:before { /* aria-label has no advantage, it won't be read inside a table */
content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; }
table td:last-child { border-bottom: 0; }
} Reference Links
https://codepen.io/AllThingsSmitty/pen/MyqmdM
https://elvery.net/demo/responsive-tables/
