Theme overriding custom Css in table options with TablePress

Hi,

thanks for your post, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Aaack! Thought I did. It is the cleanroom disinfectants page. Thanks so much for your quick reply.

Hi,

thanks for the link!

The border and the checkmarks should not be that hard: Just remove the #main from your code. Your theme does not require that.
Then, you can actually shorten that part of the code to

.tablepress-id-31 thead th,
.tablepress-id-31 tbody td {
    width: 35px;
    vertical-align: middle;
    border: 1px solid #cccccc;
}
.tablepress-id-31 .column-1{
    width: 80px;
    text-align:left;
}

The vertical-align will also take care of the vertical centering of the checkmarks. To make the center horizontally, you’ll need to remove the alignright CSS class that the images have in the HTML code.

Regards,
Tobias

Thanks for another quick response. The table is much closer than before! But, still a few problems:

• Checkmarks did not align,
• Columns 2-14 are not evenly sized
• Column headings appear to be one off to the left, i.e., the 2nd column heading overlays the 1st column; 3rd overlays 2nd; etc.

Here is the link again: clean room disinfectants. Here is the frontend tablepress code I now have:

.tablepress tbody td {
	text-align: center;
}

.tablepress thead th {
	text-align: center;
}

.tablepress-id-31 thead span {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	display: block;
	height: 200px;
	text-align: center;
	vertical-align: bottom;
}

.tablepress-id-31 thead th,
.tablepress-id-31 tbody td {
	width: 35px;
	vertical-align: middle;
	border: 1px solid #cccccc;
}

.tablepress-id-31 .column-1 {
	width: 80px;
	text-align: left;
}

Hi,

as mentioned above, you’ll need to modify the HTML of the checkmark images:

To make the center horizontally, you’ll need to remove the alignright CSS class that the images have in the HTML code.

Then, it could also help to uncheck the “Use DataTables” checkbox on the “Edit” screen of the table, as you have turned off the individual features anyway.

Regards,
Tobias

Sorry I missed the image alignright suggestion the first time. That is done now and works great. Also, unchecked the “Use Data Tables” checkbox. In the table itself, I have span on all heading entries.

I have played around with the text-align and vertical-align in multiple ways as well as the width elements using % vs px. No matter what I change them to or where I place them, they make no difference. This is why I originally tried the additional of #main trying to override the theme. What I am trying to achieve in the cleanroom disinfectants table is:

• make the first column wider
• Make the remaining columns all the same width
• Make the table fit within the content area and not overlay the contact form’s submit button
• Have the column headings all align at the bottom of the heading row and in the middle of the column

Frontend CSS code below:

.tablepress tbody td {
	text-align: left;
}

.tablepress thead th {
	text-align: center;
}

.tablepress-id-31 thead span {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	display: block;
	height: 70px;
	line-height: 85%;
	text-align: left;
	vertical-align: bottom;
}

.tablepress-id-31 thead th,
.tablepress-id-31 tbody td {
	width: 35px;
	text-align: left;
	vertical-align: middle;
	border: 1px solid #cccccc;
}

.tablepress-id-31 .column-1 {
	width: 100px;
}

Hi,

first: No need to post your CSS here all the time, I can see that in the page ?? Makes life easier for both of us ??

Now, “Use Data Tables” is still check from what I can see…

Then, please try this “Custom CSS”:

.tablepress tbody td {
	text-align:left;
}
.tablepress thead th {
	text-align:center;
}
.tablepress-id-31 thead span {
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	display:block;
	height:40px;
	width: 35px;
	line-height:85%;
	text-align:left;
	vertical-align:bottom;
}
.tablepress-id-31 thead th,
.tablepress-id-31 tbody td {
	width:35px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #cccccc;
}
.tablepress-id-31 thead th {
	height: 90px;
	vertical-align: bottom !important;
}
.tablepress-id-31 .column-1 {
	width:100px;
	text-align: left;
}

That’s the best that I can get.

Regards,
Tobias

Thank you so much. It is much better now. You were right that the Data Table Options remained checked. I have been having browser issues so perhaps it did not save correctly. Now the only “tweak” that would be helpful is if the column headings centered on the column. Currently the column heading text aligns to the left. I tried a few things, but for some reason this is terribly challenging to me. If you have no other ideas for centering the headings, let me know and I will close this and just live with it. Thanks so much for your help.

Hi,

good to hear that things are better now! ??

For the centering of the headings: Unfortunately, I can’t find a solution to that. My assumption is that rotating the text takes some freedom from us, regarding the alignment ??
It seems that you’ll have leave them left aligned.

Best wishes,
Tobias

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

Thanks, Tobias! You are very patient and awesomely responsive. I will certainly rate TablePress!

Hi,

thanks for the review, I really appreciate it!

Best wishes,
Tobias