WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. vovaaah
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

    Thanks a lot!

  6. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    no problem, you are very welcome!

    Best wishes,
    Tobias

  7. davebos
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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

  11. jpdayan
    Member
    Posted 2 years ago #

    After hours and hours trying to apply your answers to get a fixed width of columns in the table, the only trickery I found was to put in the firt ceklle of each column a "_____________________________" It was a lot of time to adjust the rignt number of _ but now it's working !!!
    Before that the auto witdh of my 3 colums was approx 60% 15% 35% and I wanted 33 33 33 !
    my website is 17agauche.fr
    And if now you tell me how to get text starting with less margin left and top it would be fantastic

    NB. The content of each cell is a "Widget on Pages" widget with WP-CPL in each !!!

    Thanks of lots for your help

  12. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    the reason for why the CSS code is not working for you likely is that you are entering it in the wrong place. It must not go into the "Extra CSS classes" field on the table's "Edit" screen, but into the "Custom CSS" textfield on the "Plugin Options" screen of WP-Table Reloaded.

    To make all three columns equal width you will want to try

    .wp-table-reloaded-id-1 .column-1,
    .wp-table-reloaded-id-1 .column-2,
    .wp-table-reloaded-id-1 .column-3 {
      width: 33% !important;
    }

    To remove the left margin on the blocks in the cells, add

    .wp-table-reloaded-id-1 ul {
      margin: 0 !important;
    }

    Regards,
    Tobias

  13. jpdayan
    Member
    Posted 2 years ago #

    Hi Tobias,

    Thank you very much for this tip !! You are a genious and I'll vote for you as Internet President :)
    I just did'nt see the difference between the two options windows (one for the plugin, one for the current table) !!
    Now i've seen and everything works beyond my expectations. And more I discovered new options I did'nt know.
    Bravo et Merci :))

  14. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    awesome! :-) Great that this fixed it so easily. Thanks for the confirmation!
    Have fun with the plugin!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Topic