Applying CSS to a Group of Tables
-
Hi,
I have a question regarding CSS code. Basically, I’d like to know whether it is possible to simplify the whole process of applying code to specific tables that pretty much repeat themselves (except for the ID), turning the CSS into an endless list of code. In other words, is it possible to group alike tables together?
I know the general setup so far, e.g.:
Applying universal code to all tables:
.tablepress,
Applying specific code to a table ID:
.tablepress-id-N,
But how about a specific group of tables?
Let’s say I use two different kinds of tables on my website: one for concert dates, the other one for concert setlists. But both need different instructions, e.g. the first type has left-aligned bold text in its first column which is set to 25%, the second type’s text is centered while the first column is set to 8%.
Example:
.tablepress-id-2019Dates .column-1 {
width: 25%;
text-align: left;
font-weight: bold;
}.tablepress-id-2019Setlist .column-1 {
width: 8%;
text-align: center;
}Now the same rules apply to 2018Dates and 2017Dates, as well as 2018Setlist and 2017Setlist, and so on.
In order to avoid copying the same code for each and every table (in this case dates and setlists) all over again, can I put them into a group, e.g. “.tablepress-group-concertdates,” and “.tablepress-group-concertsetlists,”? And how do I link the CSS to the group, like, how does each table (or table ID) know that it has to follow the appropriate CSS?
Thanks.
- The topic ‘Applying CSS to a Group of Tables’ is closed to new replies.