Google 크롬에서 CSS Hover가 작동하지 않습니다.

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 요소에 paddining: 15px의 결과이다

.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

. 이를 제거하면 디스플레이에 영향을주지 않고 문제가 해결됩니다. 당신이 table 요소에 패딩을 추가하려면

Updated Example

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

대신 border-spacing: 15px를 사용해야합니다. border-spacing이 적용되기 위해서는 border-collapse 속성 값이 collapse이 아닌 separate이되어야한다는 점에 유의해야합니다.