Title: RESPONSIVE / COLLAPSE – CSS CUSTOMIZATION
Last modified: April 11, 2018

---

# RESPONSIVE / COLLAPSE – CSS CUSTOMIZATION

 *  Resolved [IMTanuki](https://wordpress.org/support/users/imtanuki/)
 * (@imtanuki)
 * [7 years, 12 months ago](https://wordpress.org/support/topic/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; }

Viewing 1 replies (of 1 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-css-customization/#post-10169518)
 * Hi,
 * thanks for sharing this! I’ll keep this thread in mind as a reference. Maybe 
   I can use this for the FAQ page as well…
 * Best wishes,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘RESPONSIVE / COLLAPSE – CSS CUSTOMIZATION’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-css-customization/#post-10169518)
 * Status: resolved