CSS Hover ne fonctionne pas dans Google Chrome

Question

J'ai une table avec un effet de survol sur les lignes. Cela fonctionne très bien dans Internet Explorer, mais lorsque vous effectuez un test dans Chrome, le coin droit de la couleur de la ligne est altéré. Il ne plane pas complètement. Aucune suggestion? Voici un lien vers le code: http://codepen.io/ChaseHardin/pen/DyuEf ou le code ci-dessous.

HTML:

<table class="tableStyle hoverTable"> 
       <thead> 
        <tr> 
         <th class="theadCustom"></th> 
         <th class="theadCustom"></th> 
         <th class="theadCustom"></th> 
        </tr> 
       </thead> 
       <tbody> 

        <tr class="even myHover"> 
         <td class="tdCustom">85% $CEZ</td> 
         <td class="tdCustom">Top 1% $F</td> 
         <td class="tdCustom">10% $BMI</td> 
        </tr><!-- Table Row --> 

        <tr class="odd myHover"> 
         <td class="tdCustom">BW: 91 lbs</td> 
         <td class="tdCustom">WW: 781 lbs</td> 
         <td class="tdCustom">YW: 1,420 lbs</td> 
        </tr><!-- Darker Table Row --> 
       </tbody> 
      </table>  

CSS:

.tableStyle { 
    border: #ccc 2px solid; 
    padding: 15px; 
    text-align: center; 
    font-family: "Gabriola"; 
    font-size: 25px; 

    margin: 0; 
    margin-left: auto; 
    margin-right: auto; 
} 

.even { 
    background: #f6f6f6; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)); 
    background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); 
} 

.odd { 
    background: #fafafa; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); 
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa); 
} 

.tdCustom { 
    border: #ccc 2px solid; 
    padding: 15px; 
} 

.theadCustom { 
    padding:21px 25px 22px 25px; 

    background: #ededed; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); 
    background: -moz-linear-gradient(top, #ededed, #ebebeb); 
} 

.myHover:hover { 
    background: #f2f2f2; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0)); 
    background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0); 
} 

* { 
    margin: 0; 
} 

.hoverTable { 
    width: 80%; 
    border-collapse:collapse; 

    margin: 0; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 1

Il est un résultat de l'paddining: 15px sur l'élément .tableStyle. Supprimer cela résout le problème sans affecter l'affichage.

Updated Example

.tableStyle { 
    border: #ccc 2px solid; 
    text-align: center; 
    font-family: "Gabriola"; 
    font-size: 25px; 
    margin: 0 auto; 
} 

Si vous souhaitez ajouter un rembourrage à l'élément table, vous devez utiliser border-spacing: 15px à la place. Il est à noter que la valeur de la propriété border-collapse doit être separate plutôt que collapse pour que border-spacing ait un effet.