WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: WP-Table Reloaded] How to make columns in tbody, same width as those in thead? (8 posts)

  1. mapetite
    Member
    Posted 5 years ago #

    I am having trouble making the column widths in <tbody> be the same as those in the <thead>? I tried using the parameters option in the shortcode - I only have two columns in my table - but that didn't work.

    Next I tried using the style recommended in the example stylesheet:
    table.wp-table-reloaded-id-2 .column-1
    {
    width: 70%;
    }

    table.wp-table-reloaded-id-2 .column-2
    {
    width: 30%;
    }

    That didn't work. I also tried using just ".column-1" and ".column-2" but that didn't work either.

    At this point, I've reverted back to the original styling example provided in Example 1 and my page looks like this: `MNBL

    The data in the cells with the white background is what's in the <tbody> and as you can see, it's definitely shorter than the header columns widths. Essentially, I'm trying to get the phone numbers to line up under "Phone".

    Thanks in advance for your suggestions and recommendations.

    Vidya A.

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

  2. TobiasBg
    Member
    Posted 5 years ago #

    Hi,

    I don't really understand what you want to achieve.
    For me, the cell all have to correct widths and the table looks nice.
    Also the phone numbers are right under "Phone".

    What exactly do you want to achieve? Can you maybe provide a screenshot/picture?

    Tobias

  3. johullster
    Member
    Posted 5 years ago #

    Hello

    I'm having a similar problem (I think!!!!)

    I want to use TR to add 4 boxes to my homepage - in the main content area. I've put in 3 columns and 3 rows - the middle ones of which will be blank - this is to give space between the boxes.

    For some reason the boxes on the left hand side are wider than those on the right?

    I've tried using the parameters option in the shortcode.
    I've tried using the style recommended in the example stylesheet:
    table.wp-table-reloaded-id-2 .column-1
    {
    width: 70%;
    }

    table.wp-table-reloaded-id-2 .column-2
    {
    width: 30%;
    }

    Neither options have worked although the second changed the layout of my page menu bar!!!

    I'm completely new to wordpress and loving what I can manage - although it takes me an extremely long time!

    I'd be very grateful if you could help me so that the boxes can be all the same size.

    my site is marketingfortherapists.co.uk

    PS I'm loving the simplicity of table reloaded - congratulations on a great plugin!

  4. TobiasBg
    Member
    Posted 5 years ago #

    Hi,

    thanks for your compliments.

    I noticed two things in the code on your site which might cause trouble:

    1. In the CSS you use the selectors .column-A, .column-B and .column-C. This will not work as they have to be indexed numerically. Please change that to .column-1, .column-2 and .column-3 respectively.

    2. You seem to use a shortcode like [table id=1 column_widths="40%|10%|50%" /]. This is fine, except that the quotation marks (") around 40%|10%|50% are the wrong ones (you probably copied the code from my website where they accidentally got rewritten to typographically nicer ones). Please remove them and type them in again by hand. (Do you know what I mean? Might sound confusing.)

    On thing I doubt is that the code changed the layout of your menu bar as I can't see why it should have impacted it.

    Please make those to changes and tell me if they have an effect.

    Thanks!
    Tobias

  5. johullster
    Member
    Posted 5 years ago #

    Hi Tobias

    Thanks for getting back to me so quickly.

    I've opted to change things in the the shortcode area, now with 5 columns (decided to have 3 boxes now). I hoped the change might clear out any issues and set things straight.

    Unfortunately no! I've changed the quotation marks but it doesn't seem to have made any difference.

    If i'm going to change via the CSS should I be formatting in the tables and content section or here

    /*-------------------- LAYOUT to keep it all together -----*/

    table#layout {
    font-size: 100%;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    }

    .col-1 {width: 30%;}
    .col-2 {width: 5%;}
    .col-3 {width: 30%;}
    .col-4 {width: 5%;}
    .col-5 {width: 30%;}

    appreciate your help

    Jo

  6. TobiasBg
    Member
    Posted 5 years ago #

    Hi,

    ok, I looked at it again:
    1. You still have not corrected my first point from above. (Changing the .column-A (and so on) to .column-1 (and so on).
    Actually if you do that, everything should be working fine.

    This is basically also what you are trying to do with the CSS code you posted. The problem with that:
    table#layout does not apply to tables created with my plugin, because they don't have the ID layout. The .col-X would work, but it has to be the complete word "column" (like .column-X) (This is essentially the same as my first point.)

    Just to make sure: Please post the exact shortcode you use here (not by re-typing it, but by Copy and Paste). (And put it inside<code></code>)

    Thanks,
    Tobias

  7. johullster
    Member
    Posted 5 years ago #

    Hurragh, hoorah, genius, genius, genius it was the abbreviation col-that was doing the damage. Thanks for your time and patience Tobias, very much appreciated...now on to the next issue!!!!

    Thanks again

  8. TobiasBg
    Member
    Posted 5 years ago #

    Hi,

    great that it works now.

    There are still some things that I would advise to clean up, to get a smaller page size and faster loading times:
    You still have the .column-A thing in your CSS. You don't need that anymore. Go to the "Plugin Options" of WP-Table Reloaded and clear the CSS textbox (and save).

    And you put the shortcode (with single quotation marks) into one other styling element (I couldn't find out where though, maybe in your Theme Options somewhere.) Remove that from there to, as the shortcode needs only be put into the page/post content.

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Topic