html - 为什么这个 CSS 设置没有应用到我的 table 上？

Question

我有以下 CSS 问题。

我有这两个表(第一个代表标题，第二个包含内容):

<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>

两个表都设置了standard-table-cls和innerTable类。

这是standard-table-cls类的代码:

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;
}

这是 innerTable 类的代码(我希望设置了 innerTable 类的表格的宽度=总空间的 70%，并且它漂浮在右边):

.innerTable{
    width: 70%;
    float: right;
}

问题是使用之前的设置似乎看不到与.innerTable类相关的CSS设置。

奇怪的是，如果我以这种方式设置内联样式:

<table border="1" class="standard-table-cls innerTable" style="width: 70%; float: right;">

有效。

为什么？我错过了什么？我该如何解决这个问题？

谢谢

Answer 1

试试这个:

table.innerTable { }

table.standard-table-cls 比 .innerTable 更具体，因此它会覆盖您在 .innerTable 中的样式。