WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
Align Text Left and Reduce cell size (20 posts)

  1. psfnow.com
    Member
    Posted 2 years ago #

    Hi Tobias,

    I have included 2 tables at my site using wp-table reloaded, they are
    here and here

    My question is:
    As you can see from both tables, the cell contents are centralized. How do I align them to the left?

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. psfnow.com
    Member
    Posted 2 years ago #

    also, i managed to change one of the tables to without borders, but the background still is white after i changed it to f8f8f8, is anything wrong with my custom css area? you will notice the other table is still with alternate highlighted rows and the pagination refuses to show, why?

    this is in my custom css area of wp-table reloaded:

    .wp-table-reloaded-id-16, .wp-table-reloaded-id-16 td, .wp-table-reloaded-id-16 th {
    border: none!important;
    border-collapse: collapse!important;
    border-spacing: 0px!important;

    .wp-table-reloaded-id-1, .wp-table-reloaded-id-1 td, .wp-table-reloaded-id-1 th {
    border: none!important;
    border-collapse: collapse!important;
    border-spacing: 0px!important;

    .wp-table-reloaded-id-16 .row-26 td {
    background-color: #F8F8F8!important;
    }

    .wp-table-reloaded-id-1 .row-29 td {
    background-color: #F8F8F8!important;
    }

    .wp-table-reloaded td,
    .wp-table-reloaded th {
    text-align: left!important;
    }

  3. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    yes, the centered text is the default in your theme.
    To change this to left-aligned, just add the following code to the "Custom CSS" textarea on the "Plugin Options" screen of WP-Table Reloaded:

    .wp-table-reloaded th,
    .wp-table-reloaded td {
      text-align: left!important;
    }

    Regards,
    Tobias

  4. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    the code is not working, because for the first two blocks, the closing } brackets are missing.
    Once you add those (two occurances), the background color should be working.

    Regards,
    Tobias

  5. psfnow.com
    Member
    Posted 2 years ago #

    the alignment works now! thanks!

    however, why is the color not the same as the tab? it is still white instead of grey?

  6. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    that's because you have only changed the background of one row (the last one), where it works as expected.

    To change the background color of the entire table, you will need to use

    .wp-table-reloaded-id-16 td {
      background-color: #F8F8F8!important;
    }

    Regards,
    Tobias

  7. psfnow.com
    Member
    Posted 2 years ago #

    thanks, it works great now for that table! how about the other one?

  8. psfnow.com
    Member
    Posted 2 years ago #

    ah, i got it already! thanks a million!

  9. psfnow.com
    Member
    Posted 2 years ago #

    whoops, something happened to the other table and pagination is gone. what can i do to enable it?

  10. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    you disabled the "Table Head" checkbox, which is required for the pagination feature (and all other features that the DataTables JavaScript library offers).

    Regards,
    Tobias

  11. psfnow.com
    Member
    Posted 2 years ago #

    oh thanks, i shall enable it again then!

  12. psfnow.com
    Member
    Posted 2 years ago #

    what do i do if i want to have a scrollbar for the table?

  13. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    unfortunately, I don't have a solution for a scrollbar, sorry :-( I have seen it on a few sites, but I don't really know how to add it to the JavaScript code, sorry.

    Regards,
    Tobias

  14. psfnow.com
    Member
    Posted 2 years ago #

    no problem tobias. i am already enjoying your table as it is. someday if u do know how it will be perfect!

  15. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    yes, maybe I'll find a solution in the future.
    I'll likely blog about that then on my website.
    Have fun with the plugin!

    Best wishes,
    Tobias

  16. philipt18
    Member
    Posted 2 years ago #

    Any chance in the future you would add per-column alignment options?

    Also, the custom CSS in the plugin options means that all tables will be affected. Is there any way to restrict it to a specific table? Thanks.

  17. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    thanks for your question.

    You can already set the alignment through CSS, and I feel that this is a lot more powerful than any additional settings for this - which would also make the user interface more complicated.

    And of course you can restrict the "Custom CSS" code to a specific table.
    Just change the selector from

    .wp-table-reloaded

    to

    .wp-table-reloaded-id-123

    (where 123 would be the ID of the table in question).
    More on the CSS selectors can be found in the documentation at http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/documentation/

    Best wishes,
    Tobias

  18. philipt18
    Member
    Posted 2 years ago #

    Thank you.

  19. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    sure, no problem!

    Regards,
    Tobias

  20. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi again,

    @psfnow.com: Actually, there is a solution for a scroll bar. This is a new feature of the DataTables JavaScript library, which I did not really know yet.
    You can see examples here: http://datatables.net/release-datatables/examples/basic_init/scroll_x.html (horizontal scrolling) and http://datatables.net/release-datatables/examples/basic_init/scroll_y.html (vertical scrolling).
    Is this what you want?

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic