对齐div边框和表格边框

Question

我试图并排放置一个div和一个表并对齐其水平边框：

 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/

问题是，在Chrome和IE11中，边框未对齐1px

在FF上，它们完全对齐

是否有对此的一般解决方法？

Answer 1

删除所有边框样式。 然后添加下一个：

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;
}

这是jsfiddle： http : //jsfiddle.net/2x6me2tL/2/