html - 一般表格样式和类指定表格样式可以一起使用吗？

Question

所以我有一个样式很好的表格(至少我是这么想的；))但我也希望表格的 TH 有一个弹出信息显示。

为了更清楚一点:

漂亮的表格

TH悬停弹出

如您在第二张图片中所见，弹出窗口的样式覆盖了“常规”TH 样式。

现在我研究了一下 css 重写，但我不太明白如何让它们共存。

有人知道如何修复它吗？

通用样式的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>