Why this CSS settings is not applied at my tables? - html

Question

I have the following CSS problem.
I have these 2 tables (the first one represent the header and the second one contains the content):
<div>
<table border="1" class="standard-table-cls innerTable">
<thead>
<tr>
<th width="14.2%">Codice RM</th>
<th width="14.2%">Autore Firma</th>
<th width="14.2%">Data Firma</th>
<th width="14.2%">Acq Riserva</th>
<th width="14.2%">Consegna Finale</th>
<th width="14.2%">Descrizione RM</th>
<th width="14.2%">Imponibile</th>
</tr>
</thead>
</table>
</div>
<div class="overflowContainer">
<table border="1" class="standard-table-cls innerTable scrollableTable">
<tbody>
<%
int count = 0;
for (RM currentRM : salDettaglio.getRM()) {
String test = currentRM.getAcqRiserva();
String evenOrOdd;
if((count & 1) == 0) {
evenOrOdd = "even";
}
else {
evenOrOdd = "odd";
}
count++;
%>
<tr id="rmRow" class=<%=evenOrOdd %> >
<td width="14.2%"><%=currentRM.getCodiceRm()%></td>
<td width="14.2%"><%=currentRM.getAutoreFirma()%></td>
<td width="14.2%"><%=currentRM.getDataFirma()%></td>
<td width="14.2%"><%=currentRM.getAcqRiserva()%></td>
<td width="14.2%"><%=currentRM.getConsegnaFinale()%></td>
<td width="14.2%"><%=currentRM.getDescrizioneRM()%></td>
<td width="14.2%"><%=currentRM.getImponibile().toString()%></td>
</tr>
<%}%>
</tbody>
</table>
</div>
Both the tables have setted the standard-table-cls and the innerTable classes.
This is the code of the standard-table-cls class:
table.standard-table-cls {
margin: 0px 0px 0px 0px !important;
width: 100%;
border : #76818a 1px solid;
border-collapse: collapse;
text-align: center;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#76818a;
table-layout: fixed;
}
And this is the code of the innerTable class (I want that a table that have the innerTable class setted have a width=70% of the total space and that it is floated on the right):
.innerTable{
width: 70%;
float: right;
}
The problem is that using the previous settings seems that don't see the CSS settings related to the .innerTable class.
The strange thing is that if I set the style inline, in this way:
<table border="1" class="standard-table-cls innerTable" style="width: 70%; float: right;">
it works.
Why? What am I missing? How can I solve this issue?
Tnx

Answer 1

Try this instead:
table.innerTable { }
table.standard-table-cls is more specific than .innerTable, so it overrides your style in .innerTable.

Answer 2

table.standard-table-cls styles are overriding you .innerTable.
For this, you should specify your styles like giving an id or using !important.
1. Using ID:
<table border="1" class="standard-table-cls" id="innerTable">
And CSS:
#innerTable{
width: 70%;
float: right;
}
2. Using !important (not the best way to do it though):
.innerTable{
width: 70% !important;
float: right !important;
}
Note: You can use other ways of specifying yours elements.
You can see how to specify your elements through this chart:

Answer 3

probably is a problem of specificity: "Specifics on CSS Specificity"
try:
table.standard-table-cls {
margin: 0px 0px 0px 0px;
width: 100%;
border : #76818a 1px solid;
border-collapse: collapse;
text-align: center;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#76818a;
table-layout: fixed;
}
.innerTable{
width: 70% !important;
float: right !important;
}