WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Fluidity/Resizing of tables in Twenty Eleven (4 posts)

  1. EarlSnappy
    Member
    Posted 1 year ago #

    Hi I'm using the twenty eleven theme, and have added a 2 column, two row table. When I reduce the width of the browser the content/header resizes reduces width, but when it gets to a certain point the table stops resizing and becomes wider than the content/header. Is there a way to either push the second column in the row down, or fix the row widths to percentages of the contnet via css? And how would I do it? Many thanks for any responses to this question, Earl

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

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Earl,

    making the second column move down below the first one is not possible, unfortunately, due to how tables in HTML work.

    Using percentages for the widths is possible, but likely won't change anything here, as the content in the cells is probably the restricting factor here.

    Can you maybe post the URL to the page with your table? I can then try to find a solution, as I have a feeling that you should not be using a table at all, but a <div>/CSS approach.

    Regards,
    Tobias

  3. EarlSnappy
    Member
    Posted 1 year ago #

    Hi Tobias, thanks very much for responding so soon.

    When I saw the plugin I assumed that it was making table layouts but in divs (not using <Table> tags) - no wonder it didn't work (silly me) - so you are right, I shouldn't be using the plug in at all. Do you know where I might get/figure out code to achieve the same effect, but with divs?

    The page is http://surfacedeals.co.uk/wp-ui-test/

    The original code that I used before installing the plugin which worked but in wide screens but 'borked' when page width was reduced was:

    #left {
    text-align: center;
    width: 200px;
    height: 200px;
    float: left;
    margin: 0px 0px 2em 4em;
    position:relative;
    }

    #right {
    text-align: center;
    width: 200px;
    height: 200px;
    float: right;
    margin: 0px 0px 2em 4em;
    position:relative;
    }

    Thanks,

    Earl

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Earl,

    that CSS code for the div approach looks good to me. Not sure, why it is not working. :-(

    Unfortunately, I'm not an expert with this in particular, so I'm out of ideas here. Sorry. You might want to ask in a more CSS related forum, maybe.

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic