Plugin Options Styling Quirk

Hi,

thanks for your question, and sorry for the trouble.

First of all, we should fix the positioning of the sort arrows. For that, please change the first block of “Custom CSS” to

.dataTables_wrapper table.tablepress thead th {
	background-color: #f0f1f2;
	padding: 6px 20px 6px 6px;
}

You can then also remove the line with the padding property from all blocks that have thead th in them.

Then, from what I can see, you are setting the column widths for column 3, 5, and 6. Have you tried also setting it for column 2?

Regards,
Tobias

Hi,
I tried your suggestions and it still didn’t make the three tables format the same from the same css styling. So . . .
. . . I tried an experiment whereby I changed the order of the tabs so that the Fall table was the last one and the Spring table was first.
Guess what? It appears that whatever table is in the first tab on the left is formatting differently than the next two tabs’ tables! Is that weird or what? Same css styling, only difference is that the first table in a three-tabbed piece of a web page formats differently than the other two.
Here is where I tested that out.
https://extendedstudies.boisestate.edu/educatorsdevelopment/testing-tables-tabs-issue/

Thoughts?

Hi,

that might actually make sense. The reason for this could be the tabs indeed. Those (as they are hiding two tables initially) make it harder for the DataTables JS library (that brings us the sorting) to do a proper calculation of the individual column widths.

It might therefore be necessary to manually set the widths with a higher priority. For that, please try adding the !important keyword after the width, like

width: 40px !important;

Regards,
Tobias

That worked! Thank you so much. I thought of that – of it being a little too buried, so to speak, when there was three tabs vs two. But, obviously, I didn’t know how to fix it. Thank you.

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!