CSS border-collapse 在 Chrome 中不能完全工作，在 td 中带有 display：flex？

Question

设置一些字体的边框宽度为" thin"还有一些是"0";对于border-collapse: collapse;，我本以为会给我而不是2px宽的边框，但我得到了不一致的边框。这似乎是一个问题，当一个有显示:flex在它-被渲染2px宽而不是1px，好像没有边界崩溃。这是Chrome的缺点还是我错过了CSS技术?

有没有人对什么情况下导致边界崩溃达不到理想的Chrome?

下面是一个示例中的效果——单元格2似乎忽略了border-collapse。

table {
box-sizing: border-box;
border-collapse: collapse;
}
td {
border-left: thin solid #d3d3d3;
border-right: thin solid #d3d3d3;
}
.d-flex {    display: flex;    }

<table class="my-grid">
<tr>
<td>cell one</td>
<td class="d-flex">cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>       
</tr>
</table>

Answer 1

border-collapse属性只适用于table和inline-table元素。

你是在告诉表格单元格显示为flex而不是inline-table元素，这样它就不会折叠边框。

请注意，这不是特定的Chrome。在Edge和Firefox中测试得到相同的结果。

Answer 2

使用display: flex;会使单元格失去一些理想的表单元格属性，因为它不再被设置为display: table-cell;，并且没有display: table-cell-flex。

所以唯一的解决方案似乎是在<td>中添加一个容器<div>元素，它应该自然地占用整个表格单元格，除了它的填充，如果有的话，并使它有display: flex;，这样我就可以为内容使用flexbox样式。

table {
box-sizing: border-box;
border-collapse: collapse;
}
td {
border-left: thin solid #d3d3d3;
border-right: thin solid #d3d3d3;
}
td {
display: table-cell;
vertical-align: inherit;
}
.d-flex {    display: flex;    }

<table class="my-grid">
<tr>
<td>cell one</div></td>
<td><div class="d-flex">cell two</div></td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>

</tr>
</table>