Cannot override previously defined css rule - html

Question

I have a simple table and associated CSS rules for the table as shown:
HTML:
<table id="depts">
<tr>
<th>Department</th>
<th>Posts</th>
</tr>
<tr>
<td colspan="2" class="none"> No Posts in this department</td>
</tr>
</table>
CSS:
#depts {
width: 500px;
font-family: 'Open Sans', sans-serif;
border-spacing: 0;
border: 1px solid black;
}
#depts td{
border-top: 2px solid #607D8B;
text-align: left;
font-family: 'Patua One', cursive;
padding: 10px;
}
.none {
text-align: center;
padding-top: 40px;
}
As it can be seen, I've added a new class for a td named none.The text-align property has been changed from left to center.But it is not reflected, when I run the page.The output is as below:
Why is'nt the new rule being ignored.Does colspan has anything to do with it?

Answer 1

just add #depts before your .none declaration.
.none class have a lower priority than #depts td.
You can take a look at priority order here or here
#depts {
width: 500px;
font-family: 'Open Sans', sans-serif;
border-spacing: 0;
border: 1px solid black;
}
#depts td{
border-top: 2px solid #607D8B;
text-align: left;
font-family: 'Patua One', cursive;
padding: 10px;
}
#depts .none {
text-align: center;
padding-top: 40px;
}
<table id="depts">
<tr>
<th>Department</th>
<th>Posts</th>
</tr>
<tr>
<td colspan="2" class="none"> No Posts in this department</td>
</tr>
</table>

Answer 2

Add the "important" flag to the none class like this:
.none {
text-align: center!important;
padding-top: 40px;
}

Answer 3

Your rule is ignored (not really ignored) because it has lower specificity (See: CSS Specificity: Things You Should Know).
You could use:
#depts td.none {
text-align: center;
padding-top: 40px;
}

Answer 4

ID has more priority than class so you can add
#depts .none {
text-align: center;
padding-top: 40px;
}
or
.none {
text-align: center!important;
padding-top: 40px;
}
CSS Specificity can be found here