Title: Table customizing
Last modified: August 21, 2016

---

# Table customizing

 *  [Lloyd](https://wordpress.org/support/users/llolee/)
 * (@llolee)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/table-customizing/)
 * I’m trying to get rid of some lines on my theme’s `<table>` [Theme: Parabola].
   I use a child theme and have edited plenty of things, but can’t seem to figure
   this out.
 * Here’s a link to the page:
    [http://www.backpackingscubadiver.com/gear/](http://www.backpackingscubadiver.com/gear/)
 * I’ve tried a few different things in the editor, but currently I’m at:
 *     ```
       .entry-content tr,
       .entry-content td {
       border-color: transparent;
       }
       ```
   
 * but that’s not working. Any suggestions?

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/table-customizing/#post-4809080)
 * 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;
       }
       ```
   
 *  Thread Starter [Lloyd](https://wordpress.org/support/users/llolee/)
 * (@llolee)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/table-customizing/#post-4809085)
 * I’m using WordPress SEO and possibly a caching plugin – I’d have to look [internet
   isn’t what you’d call ‘good’ here, just adding the proper CSS takes a fortnight].
   But I think I’ll leave them, because your suggestion worked.
 * However, I don’t see why/how the `.hentry` comes from though…
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/table-customizing/#post-4809096)
 * If you look at the structure of the page using a web debugging tool like [Firebug](http://getfirebug.com/)
   or [Chrome Developer Tools](https://developers.google.com/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](http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/),
   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.
 *  Thread Starter [Lloyd](https://wordpress.org/support/users/llolee/)
 * (@llolee)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/table-customizing/#post-4809225)
 * Okay, I see **hentry**, but why choose that instead of** type-page** or **status-
   publish** or **page** …does it even matter?
 * 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:
 *     ```
       #content div#post-547 .hentry tr td {
       border-color: transparent;
       font-size: 8px;
       }
       ```
   
 * 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?
 * Thanks very much for your help.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/table-customizing/#post-4809227)
 * 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.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Table customizing’ is closed to new replies.

 * 5 replies
 * 2 participants
 * Last reply from: [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * Last activity: [12 years, 1 month ago](https://wordpress.org/support/topic/table-customizing/#post-4809227)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics