Problems with CSS formatting

Hi,

thanks for your post, and sorry for the trouble.

That should not be a problem. You’ll basically make sure to put all “Custom CSS” into the corresponding textarea on the “Plugin Options” screen.
Note that this textarea needs to contain the CSS for all tables at the same time, i.e. there’s not one field for each table, but one common field for all tables.
Could that be the problem, i.e. are you overriding the previous CSS with the new one?

Regards,
Tobias

Hi Tobias,
thanks for a very quick reply.

Okay as I’m fairly new to all this I may be being a bit stupid. I have added css to table 1 using the table ID number and got the ‘look’ I want. At this stage the others remain unchanged.

When I put the same css, as table 1, into the other table text areas using the correct page ID the previous one reverts to the original formatting.

What do I need to do to get them all looking the same?

Thanks

Hi,

see, there’s no concept of “the other table’s textareas” here. There’s just one common textarea for all tables here (on the “Plugin Options” screen). So, that’s where all the CSS goes.
You first put that for table 1 there, then create a new table (for example table 2), and then put the CSS for table 2 also into the textarea on the “Plugin Options” screen, so that that then has the CSS for table 1 and table 2. Does that make sense? (From what I can see, you are doing that right now, so I think it does make sense ?? )

Then, additionally to that, you have some CSS that only use the .tablepress selector in it (and not e.g. .tablepress-id-2). As that CSS will be applied to all tables already, you should not copy it and paste it into the field again (because it might override other tables’ CSS again). So, in summary, the “Custom CSS” should first contain all the CSS that starts with

.tablepress ...

and then all the CSS for the individual tables, like

.tablepress-id-2 ...

and

.tablepress-id-4 ...

Regards,
Tobias

Hi Tobias,
thanks, I just worked it out, I understand now. One final question please. Is it possible to make changes in an individual table leaving the others unchanged?

Hi,

yes, that is possible. You will simply have to use the ID based selector, like

.tablepress-id-6 ...

That code will only influence table 6, but leave the others unchanged.

With that, your entire “Custom CSS” should be

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border: 1px solid #b8b8b8;
}

.tablepress thead th,
.tablepress tfoot th {
	background-color: #CDC1C5;
}

.tablepress td {
	width: 33%;
}

.tablepress-id-1 tbody td {
	font-family: Tahoma;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
}

.tablepress-id-2 {
	width: 100%;
	margin: 0 auto 1em;
}

.tablepress-id-2 tbody td {
	font-family: Tahoma;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
}

.tablepress-id-4 {
	width: 100%;
	margin: 0 auto 1em;
}

.tablepress-id-4 tbody td {
	font-family: Tahoma;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
}

.tablepress-id-7 {
	width: 100%;
	margin: 0 auto 1em;
}

.tablepress-id-7 tbody td {
	font-family: Tahoma;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
}

This will first set the default values for all tables (indicated by .tablepress), and then set the specific changes for tables 1, 2, 4, and 7 (indicated by the ID in the selector).

Regards,
Tobias

Thanks Tobais,

I understand how it works now. I really appreciate all your help, good luck with the plugin.

Hi,

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

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!