RESPONSIVE / COLLAPSE – CSS CUSTOMIZATION

If anyone is interested, here is a compilation of the CSS provided by Tobias to:

– customize the collapse button’s position, color
– cleanup the format for detail (expanded) fields (so that labels and values are consistently separated)
– optimize real estate for detail

/* TABLEPRESS – COMMON – COLLAPSE FUNCTION – MOBILE */
.tablepress.dataTable.dtr-inline.collapsed > tbody > tr[role=”row”] > td:first-child:before,
.tablepress.dataTable.dtr-inline.collapsed > tbody > tr[role=”row”] > th:first-child:before {
background-color: #b3b3b3;
top: 15px;
font-family: Impact;
font-weight: bold !Important;
vertical-align: middle !Important;
}

.tablepress.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
.tablepress.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
background-color: #7B68EE;
top: 15px;
font-family: Impact;
font-weight: bold !Important;
vertical-align: middle !Important;
}

/* TABLEPRESS – FIX FOR COLLAPSE WORD WRAP ISSUE */
.tablepress .child li {
clear: both;
border: none!important;
}

.tablepress span.dtr-title {
float: left;
}
.tablepress span.dtr-data {
float: right;
width: 100px;
}

/* TABLEPRESS – FIX FOR COLLAPSE LABEL PADDING ISSUE */
.tablepress .child {
padding: 0 !important;
}