[Plugin: WP-Table Reloaded] Little CSS adjustment for table layout

  • rudme

    (@rudme)


    13 years, 9 months 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???

Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    13 years, 9 months 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

Viewing 1 replies (of 1 total)
  • The topic ‘[Plugin: WP-Table Reloaded] Little CSS adjustment for table layout’ is closed to new replies.