CSS table design within an css ID area

Question

I have an external css file which defines tables within an ID div like

#content table {margin:0; border-collapse:collapse;}
#content table.width100 {width:100%;}
#content table th, #content table td {padding:5px 5px;}

I also have a section

table.nostyle, table.nostyle th, table.nostyle td {border:0 !important;}
table.nostyle th {background:none !important; text-align:left !important;}
table.nostyle th, table.nostyle td {padding:3px 5px !important;}

I can use both in my code within a div-container "content" with normal table-tags either with or without class attribute. Whenever I try to define a new class for a table inside content e.g. like

#content table.cgd {border-spacing: 10px; border: none; border-collapse: separate;}

its not working - I always get the css definition for the content-default-table although I set the class to "cgd". I am afraid I have a css error - maybe someone has an idea?

Please add a reproducible example in your question so we can see the problem you are facing. — Hidden Hobbes, Jan 27 '17 at 13:16
Sorry folks that I wasted your time, it was a simple and embarrasing caching issue but it drove me mad. Sorry again adn thanks for your support. — , Jan 27 '17 at 13:28

score 0 · Accepted Answer · edited May 23 '17 at 11:53

I can't reproduce the bug, in this snippet the class is working as expected, might be the css specificity that is explained here CSS: Understanding the selector's priority / specificity

#content table {margin:0; border-collapse:collapse;}
#content table.width100 {width:100%;}
#content table th, #content table td {padding:5px 5px;}


table.nostyle, table.nostyle th, table.nostyle td {border:0 !important;}
table.nostyle th {background:none !important; text-align:left !important;}
table.nostyle th, table.nostyle td {padding:3px 5px !important;}



#content table.cgd {border-spacing: 10px; border: none; border-collapse: separate;background:red;}

<div id="content">
<table class="cgd">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>
</div>

Thanks for your help. Its so much embarrassing but I found the issue. It was (dont dare to say) a caching issue, so the code is correct. Thanks for your time and sorry. — , Jan 27 '17 at 13:27

CSS table design within an css ID area

1 Answers1