Please also see the margins affected around the image and the texts. This may be set in the css of the theme… Please let me know what I could do.
Best,
Samuel
Hi Samuel,
Thanks for choosing Tracks!
“bordercolor” is not a valid HTML element attribute, so I think that may have been a specific implementation from your last theme.
You can add inline CSS to the table like this:
<table style="border-color: #fff">
That said, adding inline CSS forces you to re-add the same code to every table. Instead, you can add this CSS to the Custom CSS section in the Customizer, and it will automatically make all the table borders white:
.entry-content th,
.entry-content td {
border-color: white;
}
That CSS will affect each of the table header and table data elements in the table, changing all the borders to white.
Wonderful Ben, thank you very much! I really appreciate the responsiveness and the flexibility of this theme. My problem is solved.
However, there is still a pretty large margin around each side of the table. That reduces the contents quite drastically. Is there a code I could add somewhere to solve this – no margin around the borders of the tables?
Hello Ben,
Please have a look at the page now:
http://www.samvriti.com/newsletter/september-2015/
The css code worked out but not the manual html, and the latter may be required as I also want to have those grey boxes alternatively – in fact, in those I would like some lines to be white and others to be grey… Not simple perhaps. Please let me know if there would be a solution!
Much thanks!
Samuel
Yea no problem 🙂
Just to make sure we’re on the same page, do you want to remove the margins outside the table (example screenshot 1), or the margins in the sides of the table (example screenshot 2)?
Adding the styles with CSS is a bit more technical, but will be much easier in the long run. For instance, if you wanted to alternate the table row backgrounds white/gray, you could do this with the following CSS, instead of manually editing every table row’s HTML:
.entry-content table tr:nth-child(even) {
background: #f5f5f5;
}
And this CSS would make the borders white for every box (td) in every other table row (tr):
.entry-content table tr:nth-child(even) td {
border-color: #fff;
}
Hello Ben,
Thanks again for the help! Well, to clarify, on this page I would like no table lines at all – I am using tables only to arrange the elements exactly as I want. So I would like simply no borders, off the main white background, for the first part, and below (the section titled ‘Language of Foreignness’), I would like a sort of grey background rectangle behind that whole section. The exact size of this rectangle is dealt with through the width of the table lines, but indeed the borders remain…
Another option – perhaps the solution here – would be to add a css code to make all the borders not white, but transparent or inexistent (0 px large perhaps?). Then I could simply add the bg-color details for each cell, as I need. Does that css code exist?
Thanks 🙂
Samuel
Oh, and also please let me know what is happening with the margins which are automatically added between the objects in each cell, and the border. I haven’t encounter this on other themes – please let me know if these can be removed…
Thanks,
Samuel
Okay I see, removing the borders is possible with CSS. For the margins, this is coming from the td elements having their width set explicitly in the HTML.
The CSS below is going to remove the borders, and hopefully remove the margins as well. If it does not remove the margins successfully, then the width values set on the td elements will need to be deleted.
.entry-content th,
.entry-content td {
border: none;
width: auto !important;
}
It looks like you’ve found a way to make the second table gray – do you still need help with that?
Hello Ben,
Thanks again for your responsiveness and this relevant response.
I applied the css code and the problem with the border lines is now resolved. Great!
However, I removed the line about the width. It would break all the exact width that I had designed for the display of all the elements in this page (specific to each td). And indeed, the margin is also preserved that way…
Where else in the system of wordpress could we request or code that no margin be applied around any border?
Thank you 🙂
Samuel
Got it, try the following instead:
.entry-content th,
.entry-content td {
padding: 0;
}
Hello Ben,
I tried but it is not working… See the following link for a screen shot of my page, once everything is selected and the table zones are visible: http://www.samvriti.com/wp-content/uploads/2015/09/Screen-Shot-2015-10-01-at-8.53.09-pm.png
Something blocks each image from taking the whole width of each cell, while the size set to each image and the width set for the corresponding cell are the same…
Thanks,
Samuel
Okay the previous code removes a small amount of padding around the images, but they also have a margin applied. This code will remove the margin around the images.
.entry-content table img {
margin: 0 !important;
}
Once that is applied, they will display at the exact size set for them. If you want them to fill the table cell regardless of the size set in the HTML, you can add the following as well:
.entry-content table img {
width: 100% !important;
max-width: none !important;
}
This is how it should look with all of the above code applied: http://pics.competethemes.com/image/1o0H1s3J3K3V
This is how it will look if the previous padding CSS is applied too: http://pics.competethemes.com/image/043s3w3a3Y45
Wonderful Ben, my problem seems beautifully solved… Great!
A quick doubt – The horizontal measure of the theme, full-width, is 970 px… Right?
Awesome!
Tracks is responsive, so the width depends on the width of the screen being used to visit the site. After resizing the browser window, I can say the tables are pretty fluid and look good at different screen widths as-is. One thing you could do is increase the width to allow the tables to get wider on larger screens, but it’s not necessary.
