Specify no border on table

HTML & CSS
1

Hi,

I am making a site for work using a template.
I cannot change the template, but I can add my own CSS rules to it.
In the template they mark up all tables thus:

table th, table td{
padding: 0.25em;
border: 1px solid #ccc;
}

However, I need one particular table to have no borders.
Given the above, is there any way to make a rule for a class “no_border” to apply to an individual table?

I have tried

table th .no_border, table td .no_border{
border: none;
}

but with no success.

Here is the div structure of the page:
#wrapper -> #bg_right -> Content -> #inhaltsberreich

The table I am trying to target is in the div “inhaltsberreich”.

Am grateful for any help.

2

Ah, so the one table you need to target does have its own id, #inhaltsberreich?

Great.

Your current CSS says something way different:

table th .no_border, table td .no_border{
border: none;
}
says
the element with the class of “no_border” who is a child of the (th or td) who itself is a child of J Random Table.

Since the one you want to target can haz id, do this:
#inhaltsberreich th, #inhaltsberreich td {
border: 0;
}
(or border: none, doesn’t matter)

3 
#inhaltsberreich th, #inhaltsberreich td {
  border:none;
}
Edit:

Too slow.

4

Thanks for the replies and for the clear explanation.
Unfortunately all other tables (that should have borders) are also in the same div.
However, would it therefore be a reasonable solution to create a div “no_border”, mark that up as you suggest and stick my table in that?

This would then look like so:
#wrapper -> #bg_right -> Content -> #inhaltsberreich -> #no_border

#no_border th, #no_border td {
  border:none;
}

The immediate problem I see with this, is that one should only have one div with an unique id per page. Therefore if I wanted more than one table with no borders on the same page in different places, that would be difficult.

5

You can use a class as you mentioned in your previous post. Just get the syntax right:

.no_border th, .no_border td {
  border:none;
}

This presumes markup like this,

<table class="no_border">
  ...
</table>
6

Sorry, scrub that!

Obviously it would make more sense to do this:

.no_border td{
border: 0;
}

Note to self: think before posting!

Thanks for the help.

Edit: Thanks AutisticCuckoo. This time you were quicker :slight_smile:

7

Yeah I apologise, I misread you and thought #inhaltsbereich was the id on the table, but as it’s on just the div… do what Tommy said, as you’ll need some way in the HTML to make that borderless div “special”.