/*
pivotTable.css
Styling to convert a wide table into vertical cards for small screens
HTML in :
HTML in :
HTML in : ... + ... + ...
19Aug2021: created by adaption from...
https://codepen.io/jimbrts/pen/dNOeva
*/
.flexTable .cf:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.flexTable * html .cf { zoom: 1; }
.flexTable *:first-child+html .cf { zoom: 1; }
.flexTable table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.flexTable th, .flexTable td {
margin: 0;
vertical-align: top;
height: 25px;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding-left: 5px;
padding-right: 5px;
}
.flexTable th {
text-align: left;
position: relative!important;
}
.flexTable table {
display: block;
position: relative;
width: 100%;
}
.flexTable thead {
display: block;
float: left;
}
.flexTable tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
.flexTable thead tr { display: block; }
.flexTable th {
display: block;
text-align: right;
}
.flexTable tbody tr {
display: inline-block;
vertical-align: top;
}
.flexTable td {
display: block;
text-align: left;
}
.flexTable tfoot { display: none; }