Having Trouble Styling a Table in a WordPress Post

Your understanding is partly right. Later styles override earlier ones IF they have the same or less specificity of the selectors. Specificity can be a tricky/counter-intuitive thing, but the basics are: selectors that specify an element in a more narrow (specific) way override those that define them in a broader way.

It all depends on what your theme’s stylesheet does. You’ll need to investigate that. For instance, on my theme, tables in posts get styles attached from the theme via

#content tr th { ... }

and

#content tr td { ... }

In your case these would take precedence over your definitions because #content selects an outermore tag than table.sortable . This defines higher specificity, because it narrows down the context of ‘.sortable’ tables that would be selected. In this case you’d have to define your styles with

#content table.sortable tr th { ... }

and

#content table.sortable tr td { ... }

in order to have them take precedence.

An easy way to get your own styles take precedence is always to prefix your selectors with body. However, this is quite rough and can hence lead to trouble.

I’d recommend using a browser web developer tool like Firebug or WebKit’s/Chrome’s buildin developer tools to inspect the elements in questions and look at what style definitions override one another. This will give you a good clue as to what you can do to have your own take precedence.

Once you figured that, put your own styles in your themes/child theme’s style.css…if you want to format that table only use an id selector (#mytable) or if it’s more than one give them a distinct class and put that in your selectors.