CSS Hover Not Working in Google Chrome

Question

I have a table with a hover affect on the rows. It works fine in Internet Explorer, but when testing in Chrome, the right hand corner of the row color gets messed up. It isn't fully hovering. Any suggestions? Here is a link to the code: http://codepen.io/ChaseHardin/pen/DyuEf or code below.

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

It's a result of the paddining: 15px on the .tableStyle element. Removing that resolves the issue without affecting the display.

Updated Example

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

If you want to add padding to the table element, you should use border-spacing: 15px instead. It's worth noting that the border-collapse property value needs to be separate rather than collapse in order for border-spacing to have an effect.