Подскажите пожалуйста в чем ошибка?

[Kuk29]

у меня проблема в том что когда я добавляю дизайн таблицы, то перестает работать изменение цвета, и я не пойму как сделать так чтобы сочетался и дизайн и изменение цвета, все перепробовал, то что знал, не получилось(

<table class="table">
    <thead>
        <tr>
            <th>RU</th>
            <th>FR</th>
            <th>US Men</th>
            <th>US Women</th>
            <th>UK</th>
            <th>Длина</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>35.5 RU</td>
            <td>36</td>
            <td>4</td>
            <td>5</td>
            <td>3.5</td>
            <td>22.1</td>
        </tr>
        <tr>
            <td>36 RU</td>
            <td>36 2/3</td>
            <td>4.5</td>
            <td>5.5</td>
            <td>4</td>
            <td>22.5</td>
        </tr>
        <tr>
            <td>36.5 RU</td>
            <td>37 1/3</td>
            <td>5</td>
            <td>6</td>
            <td>4.5</td>
            <td>22.9</td>
        </tr>
        ...
    </tbody>
</table>

CSS

.table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    overflow: hidden;
}
.table th, .table td {
    border: 1px solid #888;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}
.table th, .table td {
    border: 1px solid #888;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}
.table td:hover {
    background: #fffabe;
}
 
.table td:hover:before { 
    background-color: #eee;
    content: '';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -2;        
}
 
.table td:hover:after { 
    background-color: #eee;
    content: '';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

Дизайн таблицы такой:

table {
 
font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
th:first-child, td:first-child {
text-align: left;
}