一般的表格样式和类指定的表格样式一起工作吗？

Question

所以我有一个很好的风格的桌子（至少这就是我的想法;））但我也希望桌子的TH有弹出信息显示。

让它更清晰：

风格迥异的表格

悬停在TH 上的弹出窗口

正如您在第二张图片中看到的那样，弹出窗口的样式覆盖了“一般”TH样式。

现在我看了一下css overriding但我无法弄清楚如何让它们共存。

任何人都知道如何修复它？

一般样式的CSS（仅限TH）

td, th {  border: 0 none; height: 30px; }

th {

    background: linear-gradient(#333 0%,#444 100%);
    color: #FFF; font-weight: bold;
    height: 40px;
}

悬停效果的样式（弹出式窗口）

.hoverEffect{
    display: inline;
    position: relative;
}
.hoverEffect:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 380px;
}

.hoverEffect:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

HTML

<table>
            <tr>                
                <th class="hoverEffect" title="De datum waarop de ticket is aangemaakt.">Datum</th>
                <th class="hoverEffect" title="De persoon die de ticket heeft verstuurd.">Verstuurder</th>
                <th class="hoverEffect" title="De afdeling of persoon waarvoor de ticket bestemd is.">Ontvanger</th>
                <th class="hoverEffect" title="Het type ticket. De eerste 3 letters geven aan of het voor software of automatisering is (VHS/VHA) en de laatste 3 letters geven aan of het om een probleem gaat (Incident - INC), of om een wijziging (Request for change - RFC)">Soort</th>
                <th class="hoverEffect" title="De status van de ticket. 3 mogelijhkheden namelijk 'Nieuw' (New), 'In afwachting' (Pending) en 'Gesloten' (Closed)">Status</th>
                <th class="hoverEffect" title="Het onderwerp van de ticket.">Onderwerp</th>
                <th class="hoverEffect" title="De beschrijving van de ticket.">Beschrijving</th>
                <th class="hoverEffect" title="Het verrichte werk aan het probleem/ticket.">Workflow</th>
                <th class="hoverEffect" title="De eindoplossing van het probleem/ticket.">Eindoplossing</th>
            </tr>
            <tr>

                <td><%=rst("Datum")%></td>
                <td><%=rst("Contact")%></td>
                <td><%=rst("Ontvanger")%></td>
                <td><%=rst("Categorie")%></td>
                <td><%=rst("Status")%></td>
                <td><%=rst("Onderwerp")%></td>
                <td><%=rst("Omschrijving")%></td>
                <td><%=rst("Oplossing")%></td>
                <td><%=rst("EindOplossing")%></td>
            </tr>

            </table>

Answer 1

这是由于.hoverEffect将单元格显示模式从table-cell更改为inline。从CSS中删除该行，表格应该正确显示。

td, th {  border: 0 none; height: 30px; }

th {

    background: linear-gradient(#333 0%,#444 100%);
    color: #FFF; font-weight: bold;
    height: 40px;
}
.hoverEffect{
    position: relative;
}
.hoverEffect:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 380px;
}

.hoverEffect:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

<table>
            <tr>                
                <th class="hoverEffect" title="De datum waarop de ticket is aangemaakt.">Datum</th>
                <th class="hoverEffect" title="De persoon die de ticket heeft verstuurd.">Verstuurder</th>
                <th class="hoverEffect" title="De afdeling of persoon waarvoor de ticket bestemd is.">Ontvanger</th>
                <th class="hoverEffect" title="Het type ticket. De eerste 3 letters geven aan of het voor software of automatisering is (VHS/VHA) en de laatste 3 letters geven aan of het om een probleem gaat (Incident - INC), of om een wijziging (Request for change - RFC)">Soort</th>
                <th class="hoverEffect" title="De status van de ticket. 3 mogelijhkheden namelijk 'Nieuw' (New), 'In afwachting' (Pending) en 'Gesloten' (Closed)">Status</th>
                <th class="hoverEffect" title="Het onderwerp van de ticket.">Onderwerp</th>
                <th class="hoverEffect" title="De beschrijving van de ticket.">Beschrijving</th>
                <th class="hoverEffect" title="Het verrichte werk aan het probleem/ticket.">Workflow</th>
                <th class="hoverEffect" title="De eindoplossing van het probleem/ticket.">Eindoplossing</th>
            </tr>
            <tr>

                <td><%=rst("Datum")%></td>
                <td><%=rst("Contact")%></td>
                <td><%=rst("Ontvanger")%></td>
                <td><%=rst("Categorie")%></td>
                <td><%=rst("Status")%></td>
                <td><%=rst("Onderwerp")%></td>
                <td><%=rst("Omschrijving")%></td>
                <td><%=rst("Oplossing")%></td>
                <td><%=rst("EindOplossing")%></td>
            </tr>

            </table>