Change row height

Hi,

thanks for your post, and sorry for the trouble.

This is likely caused by those extra <h4>s. Please remove those and instead try to set the size of the icons with CSS, like

.tablepress .icon {
  font-size: 150%;
}

Regards,
Tobias

Hi Tobias

No worries and thanks for your quick answer.

Yes, removing the H4’s worked and the rows are now all the same height. Unfortunately adding the suggested code has no effect on the size of the icons though.

What next?

Regards

Andrew

Hi Andrew,

ok, then please try again with

.tablepress [class^="icon"] {
    font-size: 150%;
}

By the way, you can shorten all of that

.tablepress-id-1 .column-1 {
	padding: 8px;
}

.tablepress-id-1 .column-2 {
	padding: 8px;
}

.tablepress-id-1 .column-3 {
	padding: 8px;
}

stuff to

.tablepress-id-1 th,
.tablepress-id-1 td {
	padding: 8px !important;
}

without having to specify all columns separately.

Regards,
Tobias

Hi Tobias

That’s brilliant!
Problem solved with the icons.

I followed your kind suggestion for tidying up the CSS – for some reason that stops the column width setting for column 1 from working? Any ideas?

Regards

Andrew

Hi Andrew,

good to hear that this helps!

Regarding the width of the first column: The problem now is that the other cells take more width, so that there’s not enough left for the first column. To change that, please change

padding: 8px !important;

to

padding: 8px 4px !important;

That will reduce the left and right spacing in the cells.

Regards,
Tobias

Hi Tobias

That’s perfect!
Many thanks for your kind and quick assistance.

Regards

Andrew

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!

Thanks

Hi,

sure, always welcome! ??

Best wishes,
Tobias

Hi Tobias

I added a brief recommendation in the directory for you

Regards

Andrew

Hi Andrew,

thanks, I really appreciate that!

Best wishes,
Tobias

Hi Tobias,
I’m new to WP and Tablepress but have been tasked with maintaining our soccer team webpage: https://www.athensdrivejagclub.org/team/soccer-mens-2/ ,
which is part of a larger site for all the school teams: https://www.athensdrivejagclub.org/
I do not have access to the style sheet, which the administrator will not share so that each team’s page is protected. We are free to simply add content, but I am excited by the creative potential here. Each team is limited to a single page, so at the very least I want to keep the page compact to limit the amount of scrolling readers must do. I want to reduce row height, but the solutions I’ve read (row height, padding, etc) all require access to the style sheet to enter CSS code, which I’ve found no way to do. Is there a way to change row height without style sheet access?
Thanks,
Joyce

Hi Joyce,

thanks for your post, and sorry for the trouble.

In your case, you’ll want to change the line height in the rows (a setting that’s coming from the theme).
This is only possible with CSS code, so that you will need to add e.g.

.tablepress td,
.tablepress th {
    line-height: normal;
}

to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.

Regards,
Tobias

Thanks for the definitive answer. Saves me from an exercise in futility.
Appreciate your help,
Joyce

Hi,

no problem, you are very welcome! I hope that you can find a solution for this on your site.

Best wishes,
Tobias