불투명 html 테두리의 이중 테두리 문제

Question

불투명 한 테두리가 그려져있어 알파가 두 배가되도록하는 문제가 있습니다.

첫 번째 n-1 요소를 적용하는 것으로 나타납니다. 마지막 자식이 잘 렌더링됩니다.

Codepen 예 :이 http://codepen.io/anon/pen/vEyeBG?editors=110

HTML :

이

<h2>Prices</h2> 

<table class="prices"> 
    <tbody> 
    <tr> 
     <td>Bananas</td> 
     <td>$1/lb</td> 
    </tr> 
    <tr> 
     <td>Oranges</td> 
     <td>$4/lb</td> 
    </tr> 
    <tr> 
     <td>Peaches</td> 
     <td>$2/lb</td> 
    </tr> 
    </tbody> 
    <tbody> 
    <tr> 
     <td>Carrots</td> 
     <td>$1/lb</td> 
    </tr> 
    <tr> 
     <td>Lettuce</td> 
     <td>50¢/head</td> 
    </tr> 
    <tr> 
     <td>Broccoli</td> 
     <td>$1/head</td> 
    </tr> 
    </tbody> 
</table> 

CSS는 :

body { 
    background:#000; 
    color:#fff; 
    font-weight:bold; 
    padding:50px; 
} 

.prices { 
    width: 400px; 
    border-collapse:collapse; 
    border-top: 2px solid rgba(255,255,255,.2); 
} 

.prices tbody tr:first-child td { 
    padding-top: 12px; 
} 

.prices tbody tr:last-child td { 
      padding-bottom: 12px; 
      border-bottom : 2px solid rgba(255,255,255,.2); 
     } 
    } 
} 

Answer 1

는 border-collapse: collapse; 재산 것으로 보인다. 그를 제거하고이 확실히이다

.prices { 
    width: 400px; 
    border-spacing: 0; <----------- 
    border-top: 2px solid rgba(255,255,255,.2); 
} 

CODEPEN