Может ли общий стиль укладки стола и класс, указанный в стиле старинного стола, работать вместе?

Question

Итак, у меня красиво оформленный стол (по крайней мере, это то, что я думаю;)), но я также хочу, чтобы TH's of the table отображали всплывающие окна.

Чтобы сделать это немного яснее:

Красиво стилизованную таблицу

Всплывающее при наведении курсора мыши на 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>