Aligning div borders and table borders

Question

I am trying to put a div and a table side-by-side and align their horizontal borders:

 div.table { border-radius: .5em; border: 1px solid silver; margin-top: .5em; margin-bottom: .5em; width: 100%; overflow: hidden; font-size: 15px; display: flex; } div.table >:first-child { flex: 0 0 auto; border-right: 1px solid silver; } div.table >:last-child { flex: 1 0 0; } div.table table { border-collapse: collapse; width: 100%; font-size: 1em; } div.table tr { border-bottom: 1px solid silver; height: 1.4em; box-sizing: border-box; } div.table tbody > tr:last-child { border-bottom: 0px; } div.table tbody >:nth-child(even) { background: #F9F9F9; } div.table tbody >:nth-child(odd) { background: #F0F0F0; } div.table td, th { text-align: left; padding: .3em; } div.table td, th { border: 1px solid silver; } div.table tr:last-child td { border-bottom: 0px; } div.table tr:first-child th { border-top: 0px; } div.table td:last-child, div.table th:last-child { border-right: 0px; } div.table td:first-child, div.table th:first-child { border-left: 0px; } div.table div div { height: 1.4em; box-sizing: border-box; border-bottom: 1px solid silver; padding: 0 .2em; } div.table div div:last-child { border-bottom: 0px; } 

 <div class="table"> <div> <div></div> <div></div> <div>Lorem</div> <div>Ipsum</div> <div>Dolor</div> </div> <div> <table> <thead> <tr> <th colspan="24"></th> </tr> <tr> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> <th colspan="2"></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> 

http://jsfiddle.net/2x6me2tL/1/

The problem is, in Chrome and IE11, the borders are misaligned by 1px

while on FF they are perfectly aligned

Is there a general fix for this?

Answer 1

Remove all border styles. then add next:

div.table{
    ...
    border: 1px solid silver;
}
div.table td,th{
    ...
    border-left:1px solid silver;
}
div.table td, div.table tr:not(:first-child) th, div.table div div:not(:first-child){
    border-top:1px solid silver;
}

Here is jsfiddle: http://jsfiddle.net/2x6me2tL/2/