Forums

WP-Table Reloaded table, column width (10 posts)

  1. vovaaah
    Member
    Posted 9 months ago #

    Hello, my website page http://wollt.org/j1jobs uses WP-Table Reloaded. I tried all the codes for changing table and column width, also putting "bAutoWidth": false in Custom Commands line. But the table doesn't seem to be affected by any command. Please help. I use twentyten theme.

  2. TobiasBg
    Member
    Posted 9 months ago #

    Hi,

    in TwentyTen, the usually most needed change is not really a change of the width of the table, but a change of the white-space (padding) in the cells.

    Please try this CSS code (just add it to the "Custom CSS" textarea on the "Plugin Options" screen):

    .wp-table-reloaded td,
    .wp-table-reloaded th {
      padding: 4px!important;
    }

    Regards,
    Tobias

  3. vovaaah
    Member
    Posted 9 months ago #

    Tobias, thank you for a super fast reply! It resolved the issue with table width!
    But I still get no result trying to change specific column width.
    If I get it right, i have to add ".wp-table-reloaded td", before every command?

  4. TobiasBg
    Member
    Posted 9 months ago #

    Hi,

    no, to change individual column's width, you need CSS code like this:

    .wp-table-reloaded-id-123 .column-1 {
      width: 100px!important;
    }

    (where 123 needs to be changed to the correct table ID).
    Unfortunately, changing column widths is not always possible, because a column will always require the width that the longest word in the content requires.

    Regards,
    Tobias

  5. vovaaah
    Member
    Posted 9 months ago #

    Thanks a lot!

  6. TobiasBg
    Member
    Posted 9 months ago #

    Hi,

    no problem, you are very welcome!

    Best wishes,
    Tobias

  7. davebos
    Member
    Posted 8 months ago #

    I have a different question, I think, related to table width.

    Relevant page = http://freetravelgenius.com/#other

    Please look at Column 1. If you are using Windows Chrome, it looks as I intend, the credit card picture fits just perfectly in the width. If you look at any table other than the "Mega bonuses" tab (which is table id#1) from IE9 or Firefox6, there is a lot of extra space in column 1. This is unfortunate since that means some of the other columns are very much bunched up.

    It took me a while to notice this since I've been using chrome.

    I understand each browser has its own algorithms for determining column widths that can override the programmers declarations. However, is there an override to the override or some other trick?

    This is what I tried so far in the plugin's custom css.

    .wp-table-reloaded img {
    margin: 1px 1px 1px 1px;
    border: 0px;
    }
    
    .wp-table-reloaded .column-1 {
    width:70px !important;
    max-width:70px !important;
    padding: 1px 1px 1px 1px;
    text-align:center;
    }

    Thanks!

  8. TobiasBg
    Member
    Posted 8 months ago #

    Hi,

    that is indeed really odd...

    I can confirm that this happens in the other browsers, but don't really see why...
    I assume that it is indeed related to the calculation of the widths, because if one sets the width of the table (currently 100%) to "auto", the behavior changes, e.g. with

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

    The browser probably just gives some of the space to each column...

    Regards,
    Tobias

  9. davebos
    Member
    Posted 8 months ago #

    I think I want to keep the table at 100%. I don't understand why if I set one column to a certain width it can't allocate the additional widths to the other columns that don't have a width set by the author? This is very frustrating.

    Another frustrating piece is needing to manually set the height and width of each picture in the table using height= and width= in the img tag. When i tried to set it via a css class, it was ignored (at least by some browsers).

    There must be some trick that I am missing.

  10. TobiasBg
    Member
    Posted 8 months ago #

    Hi,

    I can totally understand that this is frustrating. Unfortunately, I also don't see why this happens. The only thing that I can imagine that there is some conflict with/interference by some other CSS code, e.g. in your theme.
    To verify that, you could test with the WordPress Default theme, just to see what happens there.

    Regards,
    Tobias

Reply

You must log in to post.

About this Topic