Adding Format to Multiple Tables

  • Resolved carolynyalin

    (@carolynyalin)


    11 years, 2 months ago

    Hi Tobias,

    I have about 10 tables I want formatted the same. Instead of writing them all out like this

    `.tablepress-id-4 thead th,
    .tablepress-id-4 tbody td {
    text-align: center;
    }

    .tablepress-id-4 td {
    border: 1px solid #ddd;
    }

    .tablepress-id-4 th {
    border: 1px solid #fff;
    }

    .tablepress-id-4 {
    font-weight: bold;
    width: 500px !important;
    }

    /*Table 3 – Guided Pricing*/
    .tablepress-id-3 thead th,
    .tablepress-id-3 tbody td {
    text-align: center;
    }

    .tablepress-id-3 td {
    border: 1px solid #ddd;
    }

    .tablepress-id-3 th {
    border: 1px solid #fff;
    }

    .tablepress-id-3 {
    width: 500px !important;
    }

    }

    .tablepress-id-3 {
    font-weight: bold;
    }’

    What is the shorthand?
    Is it
    .tablepress-id-3,4,5,6?

    Thanks,
    Carolyn

    https://www.ads-software.com/plugins/tablepress/

Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi Carolyn,

    thanks for your question.

    The shorthand to combine multi CSS blocks is to combine the entire CSS selector.
    In your example, that would be

    .tablepress-id-3,
.tablepress-id-4,
.tablepress-id-5,
.tablepress-id-6 {
 ...
}

    So, as a more detailed example with your code:

    .tablepress-id-3 thead th,
.tablepress-id-3 tbody td,
.tablepress-id-4 thead th,
.tablepress-id-4 tbody td {
  text-align: center;
}
.tablepress-id-3 td,
.tablepress-id-4 td {
  border: 1px solid #ddd;
}
.tablepress-id-3 th,
.tablepress-id-4 th {
  border: 1px solid #fff;
}
.tablepress-id-3,
.tablepress-id-4 {
  font-weight: bold;
  width: 500px !important;
}

    Another approach would be to “invent” a new “Extra CSS class” and give that to each of the desired tables (on their “Edit” screen). With that, you could shorten the code even more. To then apply the styling to another table, you’d just give that table that “Extra CSS class” as well, without having to extend the “Custom CSS”.

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Adding Format to Multiple Tables’ is closed to new replies.