WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
Little CSS adjustment for table layout (2 posts)

  1. rudme
    Member
    Posted 4 years ago #

    Hi all,
    i just installed this
    WP-Table Reloaded
    and soon came at a little problem we all know when working with tables - if cell widths are not defined each browser does something different.

    In my case things started to look ugly when i had a lengthy text in one cell and that particular cell got spread out in way to much width compared to the others - whereas in others text that was mean't to be on 1 single line got dropped to a second line.

    First i added
    .wp-table-reloaded th {
    width:25%;
    }
    (for 4 columns)
    to the Frontend Options > Custom CSS but than i realized "what if later i need 5 or any other number of columns for another table somewhere"?

    So, i went first for
    .wp-table-reloaded th {
    white-space:nowrap;
    text-align:left;
    }
    (text align left seemed to be needed for IE which had the header row text centered)
    A check back at w3schools CSS section http://www.w3schools.com/css/pr_text_white-space.asp
    made me change that to
    .wp-table-reloaded th {
    white-space:pre;
    text-align:left;
    }
    looks okay now, more or less, but i wonder if there was a more specific solution that would allow for each table to assign cell widths in percentages for each of the cells in a row and hence for the entire table structure, within the
    Add new Table
    or
    Edit Table
    panels???

  2. TobiasBg
    Member
    Plugin Author

    Posted 4 years ago #

    Hi,

    what you want to achieve is easily possible with a slight adjustment in the CSS. (It is not possible from the "Add table" or "Edit" panels though, but hopefully might be in the future.)

    Instead of using

    .wp-table-reloaded th {
      width:25%;
    }

    which applies to all tables at the same time, just use the table specific selector:

    For example, if your first table has 4 columns, add this code:

    .wp-table-reloaded-id-1 th {
      width:25%;
    }

    (Note the additional -id-1 in the code.)
    Then, if your second table has 5 columns, just add

    .wp-table-reloaded-id-2 th {
      width:20%;
    }

    That way, each table can have its own column widths which won't interfere with each other.

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic