CSS Hover не работает в Google Chrome

Question

У меня есть таблица с зависанием на строках. Он отлично работает в Internet Explorer, но при тестировании в Chrome правый угол цвета строки перепутался. Он не полностью парит. Какие-либо предложения? Ссылка на код: http://codepen.io/ChaseHardin/pen/DyuEf или код ниже.

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

Это результат paddining: 15px на .tableStyle элемента. Удаление этой проблемы устраняет проблему, не влияя на отображение.

Updated Example

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

Если вы хотите добавить отступы к table элемента, вы должны использовать вместо border-spacing: 15px. Стоит отметить, что значение свойства border-collapse должно быть separate, а не collapse для того, чтобы border-spacing имел эффект.