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

它有效。

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

TNX

Answer 1

请改为尝试：

table.innerTable { }

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

Answer 2

table.standard-table-cls个样式覆盖了你.innerTable。

为此，您应指定样式，例如提供ID或使用!important。

1。使用ID：

<table border="1" class="standard-table-cls" id="innerTable">

和CSS：

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

2。使用!important（不是最好的方法）：

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

注意：您可以使用其他方式指定您的元素。

您可以通过此图表了解如何指定元素：

enter image description here

Answer 3

可能是一个特异性问题："Specifics on CSS Specificity"

尝试：

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

为什么这个CSS设置不适用于我的桌子？

3 个答案: