Tables within a page with Customizr

OK, you don’t want to add the styling inline, e.g., bgcolor to all of your table row elements, that’s just too much work. In Customizr there is a Custom CSS option: Appearance > Customiz it! > Custom CSS. If you expand the Custom CSS section, you’ll see a little field where you can add your custom CSS.

Try copying & pasting this into that field:

.hentry tr:nth-child(odd) td, .hentry tr:nth-child(odd) th, .hentry tr:nth-child(even) td, .hentry tr:nth-child(even) th {
   background-color: transparent;
   border: 0px;
}
.hentry table {
   margin-bottom: 0px;
}

The border: 0px; property eliminates the white lines that separate each row. The second rule that sets the margin-bottom of the table to 0px should close up some of the gap, although it looks like there’s a blank line between the two tables that you can delete using the post editor.

Thank you for helping me I really appreciate it. I am donating my time to make this for the SFCDA program that just started in my area.

I did what you indicated above. That works wonderfully for getting rid of the white boxes. =)

If you go back to the page: https://drugserasedreams.org/drug-facts-2/
can you tell me how or what I need to do to make the bottom 3 columns with the drug name links closer together.

Also, if you look close at the first two icons you can see little white lines. I looked at the code and don’t know why that is happening.

I do know I am not using dreamweaver anymore to create these pages. I thought it would be faster, but it fills the pages with to much worthless code that is not needed. I am not going to go back and do this one, but from here on out I will just code myself. Much faster I am assuming too.

Thanks again in advance for your assistance. It is appreciated.

There’s a CSS rule in the theme which sets table widths to 100%. That stretches the width of the table across the main content area and causes the extra spacing between columns. You can override this by making a change to one of the CSS rules I gave you previously. Change this:

.hentry table {
   margin-bottom: 0px;
}

to this:

.hentry table {
   margin-bottom: 0px;
   width: auto;
}

You’ll probably want to center the second table, and get rid of the extra line breaks inside the table cells.

That “white” line to the left of the cocaine image is actually part of the image, and it’s a light blue, not white. I had to copy & paste the image into a picture editor and enlarge the view to make sure. Same with the line to the right of the DMX image. So you’ll need to edit the images to crop off one pixel to the left of the cocaine image and one pixel to the right of the DMX image.

I see what you mean by the extra code from Dreamweaver. It seems like each cell has its own font definition; what a pain!