Creating a class for multiple tables

  • Resolved gwgwebmaster

    (@gwgwebmaster)


    6 years, 2 months ago

    Hi,

    I create a table (in TablePress) for each week and each of the five divisions in our golf pennant series.

    So far, I have had to go into the Plugin Options tab each time I create a table and add the code and then change the table number.

    I am up to table 43 and still have a few weeks to go.

    1. Do I have to leave all sets of commands in the PlugIn Options box, for them to apply every time the table is opened, either to edit the table or more importantly when it is viewed on the specific page?
    2. Is there a way I can create a single command/class to apply to new tables that picks up the whole code for that table?
    3. If it can be done, where and how.

    I have finally got the table looking how I want it (although I cannot get columns 2 and 5 to align left as per the page above).

    Also, you will notice I have applied the following to only the first two tables displaying on that page and would love to have a much more simpler way of achieving this look across all of the other tables for this division and the other four.

    .tablepress-id-43 .column-1,
    .tablepress-id-43 .column-2,
    .tablepress-id-43 .column-3,
    .tablepress-id-43 .column-4,
    .tablepress-id-43 .column-5,
    .tablepress-id-43 .column-6,
    .tablepress-id-43 .column-7,
    .tablepress-id-43 .column-8 {
    padding: 10px;
    }

    .tablepress-id-43 .column-1 {
    text-align: left;
    width: 20%;
    }

    .tablepress-id-43 .column-2 {
    width: 15%;
    text-align: left;
    }

    .tablepress-id-43 .column-3 {
    text-align: center;
    width: 7%;
    }

    .tablepress-id-43 .column-4 {
    text-align: center;
    width: 7%;
    }

    .tablepress-id-43 .column-5 {
    text-align: left;
    width: 15%;
    }

    .tablepress-id-43 .column-6 {
    text-align: center;
    width: 7%;
    }

    .tablepress-id-43 .column-7 {
    text-align: center;
    width: 7%;
    }

    .tablepress-id-43 .column-8 {
    text-align: left;
    width: 22%;
    }

    As you can imagine, it is very much a nuisance task which I have to do each week for each of the divisions AND the Women’s season is about to start.

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

Viewing 1 replies (of 1 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 2 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    What you are looking for are “Extra CSS classes”. This is a way to group the CSS selectors and make them shorter that way. Please see https://wordpress.org/support/topic/interval-of-tables/ and the links therein for some explanations.

    Essentially, you’ll want to create one “Extra CSS class” (it’s just a name for the group basically) for each set of tables that have the same structure (like number of columns) and style. Then, you’d use that “Extra CSS class” in the “Custom CSS”, without having to duplicate the CSS for each table again and again. To assign a table to an “Extra CSS class” group, you’d add that class to the “Extra CSS class” text field on the table’s “Edit” screen.
    So, if all tables had the same structure and style, you’d just need one “Extra CSS class”. If the tables for each division look different, you’d create one for each division, for example tablepress-division-1 and so on (only lowercase letters, numbers, and - are allowed). If the week tables have a different structure, you could create one table for each week, e.g. tablepress-schedule-week-1 and so on. Just find the “common” criterion for a proper naming.

    Note that some of your CSS (like that left aligning) is not working right now due to the “WP Responsive Table” plugin that is activated on your site. That’s interfering here with its CSS. Can you maybe deactivate that?

    As an example, table 43 could then get an “Extra CSS class” like tablepress-division-3 (I made that up, and don’t know if that would be a “good” class name.) with (shortened) CSS like

    .tablepress-division-3 tbody td {
  padding: 10px;
  text-align: center;
}
.tablepress-division-3 .column-1 {
  text-align: left;
  width: 20%;
}
.tablepress-division-3 .column-2 {
  text-align: left;
  width: 15%;
}
.tablepress-division-3 .column-3 {
  width: 7%;
}
.tablepress-division-3 .column-4 {
  width: 7%;
}
.tablepress-division-3 .column-5 {
  text-align: left;
  width: 15%;
}
.tablepress-division-3 .column-6 {
  width: 7%;
}
.tablepress-division-3 .column-7 {
  width: 7%;
}
.tablepress-division-3 .column-8 {
  text-align: left;
  width: 22%;
}

    Regards,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘Creating a class for multiple tables’ is closed to new replies.