WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Row height (14 posts)

  1. sansibario
    Member
    Posted 1 year ago #

    Hi,
    I need to give all rows in a table a specific height. I have found this code:
    .tablepress-id-1 .row-1 {height: 80px;}
    which gives one row a specific height. But how can I set a specific height for all rows, or a range of rows?

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. sansibario
    Member
    Posted 1 year ago #

    Thanks,
    works. Great!
    Regards

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    very cool! Thanks for the confirmation!

    Best wishes,
    Tobias

  5. robbypayne
    Member
    Posted 1 year ago #

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

    http://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?

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  7. robbypayne
    Member
    Posted 1 year ago #

    Worked like a charm! Thanks!

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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!

  9. oavs
    Member
    Posted 10 months ago #

    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.

  10. TobiasBg
    Member
    Plugin Author

    Posted 10 months ago #

    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

  11. oavs
    Member
    Posted 10 months ago #

    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*/
    }

  12. TobiasBg
    Member
    Plugin Author

    Posted 10 months ago #

    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

  13. oavs
    Member
    Posted 10 months ago #

    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?

  14. TobiasBg
    Member
    Plugin Author

    Posted 10 months ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags