一般 table 样式和 class 指定 table 样式可以一起使用吗?
Can general th table styling and class specified th table styling work together?
所以我有一个漂亮的样式 table(至少我是这么想的;))但我也希望 table 的 TH 有一个 pop-up 信息显示。
为了更清楚一点:
风格不错table
TH悬停pop-up
正如您在第二张图片中看到的,pop-up 的样式覆盖了 'general' TH 样式。
现在我研究了一下 css 重写,但我不太明白如何制作它们 co-exist。
有人知道如何修复它吗?
通用样式的CSS(仅限TH)
td, th { border: 0 none; height: 30px; }
th {
background: linear-gradient(#333 0%,#444 100%);
color: #FFF; font-weight: bold;
height: 40px;
}
悬停效果样式(pop-up)
.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>
这是由于 .hoverEffect
将单元格显示模式从 table-cell
更改为 inline
。从 CSS 中删除该行,table 应该会正确显示。
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>
所以我有一个漂亮的样式 table(至少我是这么想的;))但我也希望 table 的 TH 有一个 pop-up 信息显示。
为了更清楚一点:
风格不错table
TH悬停pop-up
正如您在第二张图片中看到的,pop-up 的样式覆盖了 'general' TH 样式。
现在我研究了一下 css 重写,但我不太明白如何制作它们 co-exist。
有人知道如何修复它吗?
通用样式的CSS(仅限TH)
td, th { border: 0 none; height: 30px; }
th {
background: linear-gradient(#333 0%,#444 100%);
color: #FFF; font-weight: bold;
height: 40px;
}
悬停效果样式(pop-up)
.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>
这是由于 .hoverEffect
将单元格显示模式从 table-cell
更改为 inline
。从 CSS 中删除该行,table 应该会正确显示。
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>