Invisible Table

• 

  timmogu · Member · Dec 22, 2016 at 9:35 am

  • Copy link
  • Add topic to favorites

  Hey guys,

  I have a table on this page:
  https://earth-unbound.com/about/

  I would like the background colors to be white and the borders to be 0px. (basically I need an invisible table… not only on this page)

  I did create a this class:

  .myTable {
  	background-color:#FFFFFF; border:0px;
  }

  and defined the table with this class, but it doesn’t seem to read it… or maybe the theme, which already defines tables, overwrites it again.

  What can I do?

  The blog I need help with is: (visible only to logged in users)

• 

  timmogu · Member · Dec 22, 2016 at 9:36 am

  • Copy link

  that’s the code of the table:

  <table class="myTable">
  <tbody>
  <tr>
  <td style="text-align:center;"> Timmo</td>
  <td style="text-align:center;"> Angela</td>
  <td style="text-align:center;"> Ian</td>
  </tr>
  <tr>
  <td><img class="img-circle" src="https://taiwantours.files.wordpress.com/2016/09/timmo_square2.jpg" alt="timmo_square" width="225" height="225" /></td>
  <td><img class="img-circle" src="https://taiwantours.files.wordpress.com/2016/09/angela_square1.jpg" width="225" height="225" /></td>
  <td><img class="img-circle" src="https://taiwantours.files.wordpress.com/2016/09/ian_square1.jpg" alt="ian_square" width="225" height="225" /></td>
  </tr>
  </tbody>
  </table>

• 

  thesacredpath · Member · Dec 22, 2016 at 11:03 pm

  • Copy link

  Hi there, on your about pager, I’m seeing a white background on your table, with the exception of the first row with the names in it. I checked in Firefox, Chrome and Safari. Is this resolved to your satisfaction?

• 

  timmogu · Member · Dec 23, 2016 at 1:24 am

  • Copy link

  No, it’s not.
  If you take a close look you can see that the first row has a light grey as background color and also the borders are visible.

  At least in my view (computer, smartphone and tablet) it’s not completely white.

• 

  thesacredpath · Member · Dec 23, 2016 at 6:30 pm

  • Copy link

  Hi, sorry, I was thinking your wanted the headings to have the background. The following will remove the background and also the single bottom border line below the round images.

  .post-content th, .post-content td {
  	border: 0;
  }
  .post-content table tbody > tr:nth-child(2n+1) > td {
  	background: none;
  }

• 

  timmogu · Member · Dec 25, 2016 at 2:07 am

  • Copy link

  It is exactly what I wanted… but I realiyed something. I do use tables on other pages as well like here: https://earth-unbound.com/revolver/

  and there I actually liked the design of them. Is it possible to only change it on the about page and not globally?

  Sorry for annoying you…

  Thanks a lot!

• 

  thesacredpath · Member · Dec 25, 2016 at 4:08 am

  • Copy link

  Yes, we can do that. What we will do is use the unique page id CSS class from the opening body HTML tag and precede the CSS selectors like this.

  .page-id-2 .post-content th,.post-content td {
  	border:0;
  }
  .page-id-2 .post-content table tbody > tr:nth-child(2n+1) > td {
  	background:none;
  }

• 

  timmogu · Member · Jan 4, 2017 at 4:54 am

  • Copy link

  sorry, I was not working over the holidays.
  Thanks a lot!

• 

  thesacredpath · Member · Jan 4, 2017 at 5:53 am

  • Copy link

  You are welcome.