Support » Plugin: TablePress » Change color of the “+”/”-” button in responsive tables

  • Resolved akiikiwporg


    Hi, Tobias!

    Would it be possible to change the color of the +/- button used in the Responsive Tables Extension (collapse mode)? Maybe some neat CSS-trick? 🙂

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • hi can you specify which button? Can you show it in an image?

    Thread Starter akiikiwporg


    Yes, the button that opens (green with white border) and closes (red with white border) the cut off part of a responsive table.

    As seen on this page in the TablePress documentation (under “Responsive table with the collapse mode”):

    If possible, I would like to be able to change the colors and maybe also the shadow, so the buttons are more consistent with my design.

    Plugin Author TobiasBg



    thanks for your post, and sorry for the trouble.

    These buttons are created using CSS code, namely

    .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: #31b131;
    .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: #d33333;

    Just add that to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress, with the desired colors.

    For more of that CSS code, please see


Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change color of the “+”/”-” button in responsive tables’ is closed to new replies.