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

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

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,

thanks, I really appreciate that! 🙂

Best wishes,
Tobias