WordPress.org

1. David Borrink
   Member
   Posted 2 years ago #

   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?

2. TobiasBg
   Member
   Posted 2 years ago #

   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

3. David Borrink
   Member
   Posted 2 years ago #

   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

Topic Closed

This topic has been closed to new replies.