107 lines
2.1 KiB
CSS
107 lines
2.1 KiB
CSS
.stacking__wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.stacking__wrapper .table {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
/* ------- Presentational Formatting --------- */
|
|
|
|
.stacking__wrapper .table {
|
|
border: 1px solid #f0f0f0;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.stacking__wrapper .table tr {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.stacking__wrapper .table thead tr {
|
|
border-bottom: 2px solid #f0f0f0;
|
|
}
|
|
|
|
.stacking__wrapper .table td,
|
|
.stacking__wrapper .table th {
|
|
padding: .5em;
|
|
}
|
|
|
|
.stacking__wrapper .table th {
|
|
text-align: left;
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
.stacking__wrapper .table {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
border-spacing: 0;
|
|
}
|
|
.stacking__wrapper .table thead {
|
|
position: absolute;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
padding: 0;
|
|
border: 0;
|
|
height: 1px;
|
|
width: 1px;
|
|
overflow: hidden;
|
|
}
|
|
.stacking__wrapper .table tbody,
|
|
.stacking__wrapper .table tr,
|
|
.stacking__wrapper .table th,
|
|
.stacking__wrapper .table td {
|
|
display: block;
|
|
padding: 0;
|
|
text-align: left;
|
|
white-space: normal;
|
|
}
|
|
.stacking__wrapper .table tr td,
|
|
.stacking__wrapper .table tr th {
|
|
padding: 2em 1em;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
border: 1px solid #EDF0F1;
|
|
border-top: none;
|
|
width: 100%;
|
|
white-space: normal;
|
|
}
|
|
.stacking__wrapper .table th[scope="row"] {
|
|
width: 100%;
|
|
height: 0.5em;
|
|
text-align: center;
|
|
display: block;
|
|
background-color: #B3BFC6;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
.stacking__wrapper .table td[data-header]:before {
|
|
content: attr(data-header);
|
|
display: block;
|
|
float: left;
|
|
width: 20%;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
.stacking__wrapper .table td[data-header] > * {
|
|
display: block;
|
|
width: 80%;
|
|
float: right;
|
|
clear: right;
|
|
padding-left: 1em;
|
|
margin-top: 0;
|
|
}
|
|
.stacking__wrapper .table td[data-header]:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 20%;
|
|
padding-bottom: 200%;
|
|
display: block;
|
|
}
|
|
}
|