/*
flexTable.css
Styling to convert a wide table into vertical cards for small screens
HTML in :
HTML in :
HTML in : ... + ... + ...
HTML in : | Column Heading | on each cell.
18Aug2021: created by adaption from...
https://www.cognizantsoftvision.com/blog/making-tables-responsive-for-mobile-devices/
https://codepen.io/jimbrts/pen/vgyjyM
*/
.flexTable table {
border: 0;
background: transparent;
border-radius: 0;
}
.flexTable table thead, table tfoot { display: none; }
.flexTable table tr {
display: block;
border: 1px solid white;
padding: 5px;
margin-bottom: 10px;
}
.flexTable table td {
display: block;
text-align: right;
border: none;
padding: 0px 5px 0px 5px;
}
.flexTable table td:first-child { padding-top: 20px; }
.flexTable table td:last-child { border-bottom: none; }
.flexTable table td::before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
.flexTable tbody{ /* line-height:0!important; */}