WordPress.org

Support

Support » Plugins and Hacks » [Resolved] (wp-table-reloaded) CSS for many tables at once, and a border issue

[Resolved] (wp-table-reloaded) CSS for many tables at once, and a border issue

  • What a great upgrade to wp-tables. Fabulous improvement!

    I have a couple CSS questions.

    1. Is it possible to mark up two or more tables with the same selector? I’ll probably have a dozen or more tables and I’d like to style them all universally. I tried these selector options:

    .wp-table-reloaded-id-1,2
    .wp-table-reloaded-id-1-2

    and didn’t get the consistency I was looking for.

    2. I’m using the CSS on your FAQ for no borders:

    .wp-table-reloaded-id-1 {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;
    }

    and I’m getting a left border on the first column on even rows. Yes, I used the CSS for odd/even row background colors (mine listed here)

    .wp-table-reloaded-id-1 .odd td {
      background-color: #f1eab1;
    }
    .wp-table-reloaded-id-1 .even td {
      background-color: #eadf9b;
    }

    Any ideas why I’d be getting a red left column left border only on even rows?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi David,

    thanks for your nice words and the questions.

    1. Combining selectors is of course possible and you almost got it right. Try this:

    .wp-table-reloaded-id-1, .wp-table-reloaded-id-2

    (The complete selector has to be used for the second table, i.e for the alterating row colors that would be

    .wp-table-reloaded-id-1 .odd td, .wp-table-reloaded-id-2 .odd td

    and *NOT*

    .wp-table-reloaded-id-1, .wp-table-reloaded-id-2 .odd td

    Do you understand what I mean?

    2. That left border is probably added by your theme somehow, but not exactly to the <table>, but to either the <tr> or <td>. Thus, you could try adding

    .wp-table-reloaded-id-1 tr {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;
    }

    or

    .wp-table-reloaded-id-1 td {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;
    }

    If that doesn’t help, please provide the URL to the page with the table, I’ll then probably be able to tell you where the border comes from. BTW: I use the Firefox extension “Firebug” for that, pretty neat 🙂

    Best wishes,
    Tobias

    Tobias,
    Thanks for the answers. I obviously forgot my selector “rules” for a moment. Of course it would be the same as “normal” CSS for multiple items. Oops.

    And I added the tr version of the border code from your example. That took care of the problem.

    Thanks for your time!

    David

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Resolved] (wp-table-reloaded) CSS for many tables at once, and a border issue’ is closed to new replies.