WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Align row text (19 posts)

  1. jphipps
    Member
    Posted 1 year ago #

    Would like to align text in row to middle of cell. Am using this:

    .tablepress-id-2 .row-1 {
    font-weight: bold;
    vertical-align:middle;
    }

    Which does not seem to work...

    Thanks.

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

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    can you please post the link to the page with the table? There's probably some theme CSS also influencing this.

    Regards,
    Tobias

  3. jphipps
    Member
    Posted 1 year ago #

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the link.

    Instead of what you posted above, please try

    .tablepress-id-2 .row-1 td {
      font-weight: bold;
      vertical-align:middle;
    }

    The "td" part is necessary here, as we need to target the cells directly.

    If you also want to center the text horizontally, add

    text-align: center;

    into the selector.

    Regards,
    Tobias

  5. cdnpatriot
    Member
    Posted 1 year ago #

    Is there a code that can align all of the numbers to the right side of the second column.

    http://www.kanataimmigration.ca/permanent-residence-and-processing-fees

    Also, some of the second column numbers are not aligned how do I fix that?
    tried entering this but it didn't work
    .tablepress-id-2 .row-1 td {

    vertical-align:right;
    }

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question.

    You'll just need this "Custom CSS" instead of what you posted:

    .tablepress .column-2 {
      text-align: right;
    }

    I noticed something else: For most tables on that page, you have deactivated all of the advanced features by unchecking the individual checkboxes. The better way to do that (results in better performance) is to just uncheck the "Use DataTables" checkbox for each of these tables.

    Regards,
    Tobias

  7. tomt333
    Member
    Posted 1 year ago #

    I have tried to follow this example and the text looks correct in preview but not on live page....

    http://www.newchurchnc.org/groups/

    It is the first table on this page I am trying to work with...

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    when working on columns, you must not put in the td after the .column-123 in the selector. So, please replace

    .tablepress-id-2 .column-2 td {
    	vertical-align: middle;
    	text-align: center;
    }
    .tablepress-id-2 .column-3 td {
    	vertical-align: middle;
    	text-align: center;
    }

    with

    .tablepress-id-2 .column-2,
    .tablepress-id-2 .column-3 {
    	vertical-align: middle;
    	text-align: center;
    }

    Note that I also shortened and optimized the code by grouping it.

    Regards,
    Tobias

  9. tomt333
    Member
    Posted 1 year ago #

    i have replaced it but still no luck....

    in my code the words "middle" and "center" are in red....is that normal?

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    ah, it looks like your theme also has CSS code that influences this. So, we just need to be a little bit more precise in the CSS. Please try again with

    #main .tablepress-id-2 .column-2,
    #main .tablepress-id-2 .column-3 {
    	vertical-align: middle;
    	text-align: center;
    }

    And yes, the red color for these words is normal. Don't worry too much about this, it's just a visual indication to spot "property" and "value" more easily.

    Regards,
    Tobias

  11. tomt333
    Member
    Posted 1 year ago #

    perfect! thanks so much for your help.....i love this plugin

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    awesome! Good to hear that this worked :-)

    Best wishes,
    Tobias

    P.S.: In case you haven't, please rate TablePress here in the plugin directory. Thanks!

  13. whitespider71
    Member
    Posted 11 months ago #

    Tobias,

    I have tried the above CSS for my table that I'd like to have the text centered but it's not working for me. I only need to do this for an entire table, not specific columns, so I put in the following:

    .tablepress-id-1 {
    vertical-align: middle;
    text-align: center;
    }

    Here's a link to the page ... very bottom, the Age Award Categories.

  14. whitespider71
    Member
    Posted 11 months ago #

    P.S. Everything seems to be bold too and I'm not sure why.

  15. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    First of all, please uncheck the "Table Head" and "Table Footer" checkboxes for this table. Those do not make sense here, from a semantical point of view. The background color of the table will then change, but you can then change that again with some CSS code that is shown in the TablePress FAQ.

    Then, to center the cells, please use this "Custom CSS" code:

    .tablepress-id-1 td {
      vertical-align: middle;
      text-align: center;
    }

    Regards,
    Tobias

  16. whitespider71
    Member
    Posted 11 months ago #

    Thank you sir! Got it working, only thing I'm running into is no border at the top of the table. I do have custom CSS for this which is ...

    .tablepress td {
    border: 1px solid #000000;
    }

    And, is it possible to center the Table Name?

    Thanks!

  17. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    good to hear that this helped! :-)

    To add that border, please extend the CSS to

    .tablepress td {
      border: 1px solid #000000 !important;
    }

    Then, to also center the table name, you can use

    .tablepress-table-name {
      text-align: center;
    }

    Regards,
    Tobias

  18. whitespider71
    Member
    Posted 11 months ago #

    Perfect again ... thank you!!! :)

    Regards,
    Erik

  19. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    no problem, you are very welcome! :-) Good to hear that this helped!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic