Html 对齐div边框和表边框

我试图将一个div和一张表并排放置，并对齐它们的水平边框：

div.table{
边界半径：.5em；
边框：1px纯银；
边缘顶部：.5em；
边缘底部：.5em；
宽度：100%；
溢出：隐藏；
字体大小：15px；
显示器：flex；
}
div.table>：第一个孩子{
flex:0自动；
右边框：1px纯银；
}
div.table>：最后一个孩子{
弹性：100；
}
分区表{
边界塌陷：塌陷；
宽度：100%；
字号：1em；
}
分区表tr{
边框底部：1px纯银；
高度：1.4em；
框大小：边框框；
}
div.table tbody>tr：最后一个孩子{
边框底部：0px；
}
div.table tbody>：第n个子项（偶数）{
背景#F9F9F9；
}
分区表tbody>：第n个子项（奇数）{
背景：#f0；
}
分区表td，
th{
文本对齐：左对齐；
填充：.3em；
}
分区表td，
th{
边框：1px纯银；
}
div.table tr：最后一个子项td{
边框底部：0px；
}
分区表tr：第一个孩子{
边框顶部：0px；
}
分区表td：最后一个孩子，
分区表th：最后一个孩子{
右边框：0px；
}
分区表td：第一个孩子，
第th分区表：第一个孩子{
左边框：0px；
}
div.表格div{
高度：1.4em；
框大小：边框框；
边框底部：1px纯银；
填充：0.2米；
}
div.table div div：最后一个孩子{
边框底部：0px；
}

洛勒姆
乱数假文
多洛

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

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

以下是JSFIDLE：