크롬 및 IE에서 CSS 테이블 행 테두리가 올바르게 표시되지 않습니다.

Question

아래쪽 행 테두리가있는 간단한 테이블을 만들었습니다. Firefox에서 완벽하게 작동하고, 테두리 전체 행에 표시되고 있지만, 크롬과 IE 10 만 행의 부분을 보여줍니다

<div style="display:table; border-collapse: collapse; width: 100%"> 
<div style="display:table-row; border-bottom: 1px solid black;"> 
    <div style="display:table-cell;">a </div> 
    <div style="display:table-cell; width: 15%;">b </div> 
</div> 
<div style="display:table-row; border-bottom: 1px solid black;"> 
    <div style="display:table-cell; width: 15%;">a </div> 
    <div style="display:table-cell; width: 15%;">c </div> 
</div> 
<div style="display:table-row; border-bottom: 1px solid black;"> 
    <div style="display:table-cell;">a </div> 
    <div style="display:table-cell; width: 15%;">b </div> 
    <div style="display:table-cell; width: 15%;">c </div> 
</div> 

</div> 

fiddle link

어쩌면 누군가가이 문제를 어떻게 해결 해야할지 문제?

Answer 1

빈 추가 div s.

주

<div style="display:table; border-collapse: collapse; width: 100%"> 
 
    <div style="display:table-row; border-bottom: 1px solid black;"> 
 
    <div style="display:table-cell;">a</div> 
 
    <div style="display:table-cell; width: 15%;">b</div> 
 
    <div style="display:table-cell; width: 15%;"></div> 
 
    </div> 
 
    <div style="display:table-row; border-bottom: 1px solid black;"> 
 
    <div style="display:table-cell; width: 15%;">a</div> 
 
    <div style="display:table-cell; width: 15%;">c</div> 
 
    <div style="display:table-cell; width: 15%;"></div> 
 
    </div> 
 
    <div style="display:table-row; border-bottom: 1px solid black;"> 
 
    <div style="display:table-cell;">a</div> 
 
    <div style="display:table-cell; width: 15%;">b</div> 
 
    <div style="display:table-cell; width: 15%;">c</div> 
 
    </div> 
 

 
</div>

:는 IE에서 테스트하지 않았습니다.