Table customizing

The problem is that there’s a rule that looks like this that is coming in after your child theme’s CSS:

#content tr td {
border-color: #CCCCCC;
}

Are you using some sort of plugin that compacts/minifies your CSS? Because there’s a bunch of CSS that’s embedded in the head section. Anyway, to override that rule, you just need to make the selector just slightly more specific. You can do that by adding the .hentry class to it. Change your CSS so it looks like this:

#content .hentry tr td {
border-color: transparent;
}

If you look at the structure of the page using a web debugging tool like Firebug or Chrome Developer Tools, you’ll see that the structure of the page looks like:

<div id="main">
   <section id="container">
      <div id="content">
         <div id="post-547" class="post-547 ... hentry">
            <div class="entry-content">
               ...
               <table>
                  <tr>
                     <td>

So just inside the content div is a div with an ID of post-547, which also has a class of hentry.

If you understand CSS specificity, you’ll know that:
1) selectors with a higher specificity will win out over selectors with a lower specificity.
2) if two rules have selectors with the same specificity, the rule which comes last/later will be used.

As I mentioned previously, by using a web debugging tool, you would have seen that the rule which is in effect for the table borders looks like is this:

#content tr td {
border-color: #CCCCCC;
}

Normally, when I want to override a rule, I just define a new rule using the same selector, because usually the child theme’s style.css (or the custom CSS that I add using a plugin) will come after the rule that I want to override, so my new rule would win. However, since the rule that you are trying to override comes after your child theme’s style.css file, you had to make the specificity value a higher than the current rule if you want to override it.

You could have done it very drastically by adding a !important clause to the end of the property, but that’s a bit overkill, and the use of !important is highly discouraged because it can make future updates more difficult.

Best practice is to just add enough extra specificity to get the job done. You could have added just the table element to the selector, for example (#content table tr td), and that would have still worked because adding the table element would make the selector one point higher than the rule currently in use. But adding the hentry class is a good compromise between making the selector more specific, but not so specific that you couldn’t override that one with another rule if you had to. For example, if you had a page where you actually wanted to see the table borders, you could just write another rule and add the class of the post ID as one of the selectors.

Good questions!

Okay, I see hentry, but why choose that instead of type-page or status-publish or page …does it even matter?

type-page gets assigned to those pages which are “Pages,” which might sound a bit obvious, but that is to distinguish them from pages which are single blog entries, or “Posts.” If you examine one of your blog posts, you’ll see that the same DIV container has a class of type-post instead of type-page. So all “pages” and “posts” are technically posts that have an ID of post-nn in that container, but stand-alone pages are a special type of post. status-publish only gets output when the status of the page is “published”; if it still has a status of “draft,” then it won’t appear if you try to do a preview of it. hentry will appear for that container no matter if it’s a post or page, or if it’s published or not.

Also, as your last sentenced points out, I would like to in fact have only this table hide the lines but can’t seem to add the correct selector

You were very close. The way you coded the selector:

#content div#post-547 .hentry tr td

This says to select table cells (td), which are inside of table rows (tr), which are inside of elements having a class of hentry, which are inside of a DIV having an ID of post-547, which is inside of an element with an ID of content. The problem is that the second and third objects (div#post-547 and .hentry) aren’t two separate containers, but the same one. In other words, the way this is written, the browser is trying to find a container with the class of hentry inside a DIV with an ID of post-547 and it can’t find it because they are actually the same container.

There are two ways to make this work. When you are referring to properties which pertain to the same element, you string them together without any intervening spaces. So this selector would be correct:

#content div#post-547.hentry tr td

The second object now reads “a DIV that has an ID of post-547 and has a class of hentry.

This selector is a bit more specific than it has to be. So the second way to fix this is to just take the hentry class out altogether, because the ID will still give the selector a high enough specificity to override the default rule:

#content div#post-547 tr td

And lastly, is there a way I code it so I don’t have to put in the exact post ID? For example, if I want to create another table with no borders on a different page/post I’d have to add the ID of that page/post if I use your method. Can I make it more general?

Yes, that’s the beauty of CSS. You can create a rule that affects multiple elements without having to write separate rules for each one. The best and easiest way to do this is using a class. You just come up with some class name that is easy to remember (and that hopefully won’t clash with a class name that’s already defined), assign the class name to the elements that you want to style a particular way, then write a CSS rule for that class.

For example, you could create a class called no-borders and assign that class to tables which you don’t want borders:

<table class="no-borders">

Then you change your CSS rule so it looks like this:

#content table.no-borders td {
border-color: transparent;
font-size: 8px;
}

You can leave out the tr element from the selector because it really doesn’t add much to the specificity. Now any table for which you assign the class no-borders will have that rule applied to it.