Row height

Hi,

for all rows, this would be

.tablepress-id-1 tr {
  height: 80px;
}

For a range of rows, you’ll have to write a list:

.tablepress-id-1 .row-1,
.tablepress-id-1 .row-2,
.tablepress-id-1 .row-3,
.tablepress-id-1 .row-4,
.tablepress-id-1 .row-5 {
  height: 80px;
}

By the way, usually and for most use cases, it can be simpler to set the padding instead of the height.

Regards,
Tobias

Thanks,
works. Great!
Regards

Hi,

very cool! Thanks for the confirmation!

Best wishes,
Tobias

I’m trying to do something similar on this site, this particular page:

https://www.joshuasfriends.org/heavenly-creations/

I need those paypal buttons to be up closer to the row-1 images, but the code above doesn’t seem to help. Can you advise?

Hi,

thanks for your post.

The reason for this is indeed in the PayPal code that you pasted into the cells: It contains line breaks, which are automatically transformed to HTML <br /> line break tags when the table is shown. This is what moves your buttons to the bottom. (For regular text, this is a good feature, as it allows you to use the “Enter” key in table cells. For HTML code like this, it causes the problem you are experiencing).

To change this, you’ll just have to remove all line breaks from the code, so that the entire button code would stand in one line of text (if you drag the table cell input field wide enough). Thus, only line breaks that happen automatically due to the width of the textareas are allowed.
Does this make sense?

Regards,
Tobias

Worked like a charm! Thanks!

Hi,

awesome! Great to hear that this could be fixed so easily! ??

Best wishes,
Tobias

P.S.: In case you haven’t, don’t forget to rate the plugin here in the plugin directory. Thanks!

Hi,

How can I apply this for all rows in every table without the ID’s
By the way, usually and for most use cases, it can be simpler to set the padding instead of the height.

Hi,

this should do the trick:

.tablepress th,
.tablepress td {
  padding: 4px;
}

Just paste that into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.

Regards,
Tobias

I did it like this. will this cause a problem?

.tablepress thead .column-1 {
/* OAVS table header background color change*/
background-color: #DFFAFF;
/*white-space: nowrap;*/
padding: 1px 10px 1px 10px; /* OAVS table height change*/
line-height: 1em;
}

.tablepress thead .column-2 {
/* OAVS table header background color change #FFEACE;*/
background-color: #DFFAFF;
white-space: nowrap;
padding: 1px 10px 1px 10px; /* OAVS table height change*/
}

Hi,

that’s totally fine, but the code might be longer in the end, and you have multiple places where you would have to change the padding, if you decide to do so in the future.

Regards,
Tobias

Hi Tobias

You have been a great help to get my tables all sorted out and thank you for that.

Client is asking me further to reduce the each row height on this page and does not matter what I do I can’t reduce it any further. Not sure if you are able to see my tablepress option css but its all there.

And if there is a solution what would be the second option if I want to leave the row headers as they are without reducing their heights and only reduce the remaining rows.

By the way if you are able to see my custom Css can you let me now how to see it please?

Hi,

to reduce the row height, you’ll need to reduce the padding in the cells and you can reduce the line height:

.tablepress tbody td {
  line-height: normal;
}

To me everything looks fine however, and I would further reduce the height. It just makes everything look “crowded”.

Regards,
Tobias