Как установить границы элементов в моем случае

Question

Я пытаюсь создать границу поверх границы другого элемента.

У меня есть что-то вроде следующих

HTML

<table class='table'> 
    <tr> 
     <td>123</td> 
     <td class="pick">123</td> 
     <td>123</td> 
    </tr> 
    <tr> 
     <td class="second" style="text-align:center;" colspan='3'>123</td> 
    </tr> 

</table> 

CSS

.pick { 
    border-bottom:solid 5px green; 
} 

.second { 
    border:solid 5px red !important;  
    background-color: green; 
} 

http://jsfiddle.net/j8zt8sb3/1/

В основном я хочу, чтобы создать зазор взгляд для <td>, который имеет класс 'выбирать'. Все работает отлично в каждом браузере, но красная рамка будет покрывать зеленую границу в IE, что означает отсутствие пробела. Есть ли способ исправить это? Большое спасибо!

Answer 1

Просто добавьте это свойство:

table { 
    border-collapse: collapse; 
}