Image and column size

Hi,

thanks for your question, and sorry for the trouble.

Your CSS should actually work fine, you will just need to be careful about the used table IDs as well as with some extra/erroneus } that you have in your “Custom CSS”.

For example, you are using table ID 6 in the image CSS that you posted, but that table has the ID 1.

Additionally, your “Custom CSS” code can be shortened a bit, so that I suggest to replace everything with this:

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

.tablepress-id-1 th,
.tablepress-id-1 td {
	vertical-align: middle;
}

.tablepress-id-1 .column-2 {
	text-shadow: 3px 3px #CECECE;
	text-transform: uppercase;
}	

.tablepress-id-1 .row-1 .column-2 {
	text-shadow: 0 0 #CECECE;
	text-transform: capitalize;
}

.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-5,
.tablepress-id-1 .column-6,
.tablepress-id-1 .column-8 {
	font-size: 14px;
	text-transform: capitalize;
}

.tablepress-id-1 img {
	width: 50%;
}

Regards,
Tobias

Thank you very much for your answer ! I copied-past the CSS you gave me in the custom CSS field and almost everything is working.
As you can see, the text is not vertical aligned, despite this CSS part :

.tablepress-id-1 th,
.tablepress-id-1 td {
vertical-align: middle;
}

I’d like my text to be in the middle of my cells, not only horizontaly but also vertically.

Also, I could decrease the size of my images (to 80%), thanks to you. Now, is it possible to make the first column the same size as these images ?
Regards,
Jérémie

Hi,

ah, there’s a slight mistake in my code.
Please replace

.tablepress-id-1 th,
.tablepress-id-1 td {
	vertical-align: middle;
}

with

.tablepress-id-1 thead th,
.tablepress-id-1 thead td {
	vertical-align: middle;
}

Now for the images, we’ll actually need a different approach. We can not set the width of the images and then let the cells adapt to that (because the “80%” is calculated based on the width of the column).
Thus, you’ll have to set the width of the column and then set the width of the images to 100%. For that, please replace

.tablepress-id-1 .column-1 img {
	width: 80%;
}

with

.tablepress-id-1 .column-1 {
	width: 160px;
}
.tablepress-id-1 .column-1 img {
	width: 100%;
    margin: 0;
}

Regards,
Tobias

Thank you so much for your help. I really appreciate it !

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!

Hi, I gave 5 stars to the plugin a few days ago but I’m going to write a review. Not only the plugin is perfect but your help is really appreciated.

Regards
Jérémie

Hi,

thanks, I really appreciate that! ??

Best wishes,
Tobias