CSS: hide table with no class or id

Question

Is there a way to hide a particular table that does not have a class by using the table styling to select?

For example if I had a table with this name

<table border="0" cellspacing="0" cellpadding="0" width="300" height="100">

or

<td colspan="3">

I do not have access to the html and cannot use javascript, must be a css solution.

Answer 1

You can use a contextual selector to specify exactly which <table> you want to hide according to it's parent elements (given it is unique enough in the markup from other <table>s):

So if you have:

<div><p><table border="0" cellspacing="0" cellpadding="0" width="300" height="100"></table></p></div>

Then you can do:

div p table {
    display: none;
}

Compatible on most modern browsers (including IE6).

Answer 2

Do all other tables have any classes? If yes, you could hide ALL tables and display only the ones with classes:

table { dispaly: none; }
table.someClass1,
table.someClass2 { display: table; }

Keep in mind, this will hide ALL tables and display ONLY the ones that you specify in the clause with "display: table".

Answer 3

You can apply rules using attrbutes. Combined with contextual selectors it can solve your problem:

div#page-foo div.bar td[colspan=3] {
  display: none;
}

Answer 4

If you're willing to sacrifice IE 6 compatibility, you can to it based on attributes with the attribute selector. For example:

td[colspan="2"] {color: red}
table[border="0"][cellspacing="0"][cellpadding="0"][width="300"][height="100"] {text-align: center}

Otherwise, you could try to select the table based on the context (e.g. div.container div.innercontainer table).