WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Table Width Issue (9 posts)

  1. q5sys
    Member
    Posted 2 years ago #

    Table 5 = http://mowersport.com/?page_id=737
    Table 6 = http://mowersport.com/?page_id=749

    Table code: http://mowersport.com/wptables/table-reloaded-admin.png

    Why when I set the width smaller does it suddenly spring to entire page width? I can increase the table width and it works flawlessly. It seems there is a min table width allowable before it springs to full width. I have tried this with and without table boarders and it doesnt seem to make any difference.

    I need two narrow columns.
    Also is there anyway to have a table aligned right and an image OUTSIDE of the table aligned right if they are both small enough to not bump into each other on the page?

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

  2. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    thanks for your question.

    Technically, there's no "minimum table width" by WP-Table Reloaded. The default value is to expand the table to the available content width.
    As you have already set the column widths, you might just need something like this, to stop the table from getting the full width:

    .wp-table-reloaded-id-5 {
      width: auto!important;
    }

    To place an image next to table, you'll have to make them "floating". That's

    .wp-table-reloaded-id-5 {
      float: left;
    }

    The image should be fine already.

    Regards,
    Tobias

  3. q5sys
    Member
    Posted 2 years ago #

    so if I use:

    .wp-table-reloaded-id-5 {
      width: auto!important;
    }

    Then the table will have a maximum width size of all the column widths put together? If so then this will, be all I need. I was hoping there was a way to set a max width to a total table. Being able to float it left or right will resolve any issues I may have with formating.
    Thanks for the help.

  4. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    yes, basically that's how it works. A width value of "auto" makes it easier to set the widths on the columns. You can of course also try to set a width on the table, like

    .wp-table-reloaded-id-5 {
      width: 300px !important;
    }

    Depending on the circumstances, this can make it harder to change individual column widths though.

    Best wishes,
    Tobias

  5. q5sys
    Member
    Posted 2 years ago #

    Ok so I thought I had this figured out... but apparently not.

    This is what ive got.

    .wp-table-reloaded-id-driverprofile, .wp-table-reloaded-id-driverprofile td, .wp-table-reloaded-id-driverprofile th {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;
    }
    .wp-table-reloaded-id-driverprofile {
      float: left;
      width: auto!important;
    }
    .wp-table-reloaded-id-driverprofile .column-1 {
      width: 50px;
      text-align: left;
      vertical-align: center;
      padding:5px;
    }
    .wp-table-reloaded-id-driverprofile .column-2 {
      width: 100px;
      text-align: left;
      vertical-align: center;
      padding:5px;
    }

    I've got that same code set on two pages using the extra class of 'driverprofile'

    http://mowersport.com/?page_id=301
    http://mowersport.com/?page_id=128

    But both pages render different. Any ideas where I'm going wrong.
    The Float doesnt work the way you described, and the max width doesnt seem to either. And I cant get the boarders to go away either. Do I have some dumb typo somewhere?

    Where am I going wrong.

  6. q5sys
    Member
    Posted 2 years ago #

    Ok So I reread this thread and tried

    .wp-table-reloaded-id-driverprofile .column-1 {
      width: 50px !important;
      text-align: left;
      vertical-align: center;
      padding:5px;
    }
    .wp-table-reloaded-id-driverprofile .column-2 {
      width: 100px !important;
      text-align: left;
      vertical-align: center;
      padding:5px;
    }

    IE moving the width !important thing into the column areas, but that didnt seem to change anything.

  7. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    yes, this is just a problem with the "Extra CSS classes".
    In the CSS code, you will need to use the exact same word as you entered there.
    Currently, the "Extra CSS class" field is set to "driverprofile", while in the CSS code you use "wp-table-reloaded-id-driverprofile".
    I recommend to use "wp-table-reloaded-driverprofile" in both places (without the "-id" part, but with "wp-table-reloaded-").

    Regards,
    Tobias

  8. q5sys
    Member
    Posted 2 years ago #

    got it. Thanks a ton!
    When I mess it up again in a few months... i'll be back. :)
    until then you can mark this resolved.

  9. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    very nice! Thanks for the confirmation that this did the trick :-)

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic