styling multiple tables

Resolved moliver27
(@moliver27)

8 years, 10 months ago

Hello Tobias. I want to thank you for creating such a fantastic plug-in! I have a question about styling multiple tables with the same elements. For instance, I’ve created 8 separate tables that I’d like to style the same way in terms of header color, text alignment, spacing, etc. and I was wondering if there’s a better way to code it in the plug-in options rather than listing out all the parameters for each individual table. I hope my question makes sense. I’ve attached a link to a page with a sample table I’ve created along with the css styling within the plug-in options section: http://www.willburt.com/tablepress-plug-in-options/. I’m using the same coding for the following tables: 186, 197, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197. Thank you very much for all your help and support!

https://wordpress.org/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author TobiasBg
(@tobiasbg)

8 years, 10 months ago
Hi,

thanks for your post, and sorry for the trouble.

First of all, we can greatly shorten your “Custom CSS” to this:
```
.tablepress tbody td {
  vertical-align: middle;
}

.tablepress-id-186 thead th,
.tablepress-id-186 tfoot th {
  background-color: #0077D4;
  color: #ffffff;
  font-size: 12px;
}

.tablepress-id-186 tbody td {
  border: 1px solid #0077D4;
  font-family: Tahoma;
  font-size: 12px;
  color: #000000;
}

.tablepress-id-186 thead th,
.tablepress-id-186 tbody td {
  padding: 2px;
  text-align: center;
}
```
That should already make things much easier.

Then, if all those tables have the same structure, I suggest to take a look at the “Extra CSS classes” feature of TablePress, which you can imagine like a table group name. For an example of that, please see https://wordpress.org/support/topic/extra-css-classes?replies=6

Regards,
Tobias
Thread Starter moliver27
(@moliver27)

8 years, 10 months ago

Thanks Tobias. I have a quick follow up to the “Extra CSS Classes” function of tablepress because I have yet to use it. How would I name a style series for multiple tables.
I copied the code from the previous example but I don’t know how to manipulate it to incorporate my styling from above.

.tablepress-my-custom-font-size th,
.tablepress-my-custom-font-size td {
font-size: 15px;
}

I want to name it .tablepress-portal. I think I would save it in the plug-in options and then I’m not sure what code to copy to each table. I hope this makes sense. I’m a little confused myself. Thanks!

Plugin Author TobiasBg
(@tobiasbg)

8 years, 10 months ago

Hi,

if you want to use tablepress-portal, then you would paste that into the “Extra CSS classes” field for each tables that shall belong to this group.

In the “Custom CSS”, you would then use the CSS classes .tablepress-portal in all places where you are currently using a table-ID-based selector (like .tablepress-id-123).

Regards,
Tobias

Thread Starter moliver27
(@moliver27)

8 years, 10 months ago

That’s awesome! thanks for you help Tobias. I haven’t used the Extra CSS function yet, but I can guarantee that is has been added to my tablepress arsenal! Thanks

Plugin Author TobiasBg
(@tobiasbg)

8 years, 10 months ago

Hi,

no problem, you are very welcome! 🙂 Good to hear that this helped!

Best wishes,
Tobias

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘styling multiple tables’ is closed to new replies.

Tags