CSS border-collapse 在 Chrome 和 display:flex inside a td 中不能完全工作？

Question

使用 border-collapse: collapse; 将一些 tds 的边框宽度设置为“细”，将一些设置为“0” 我本以为会给我 no 2px 宽的边框，但我得到不一致的边界。当它上面有 display:flex 时，这似乎是一个问题——呈现为 2px 宽而不是 1px，就好像没有边框折叠一样。这是 Chrome 的缺点还是我缺少 CSS 技巧？

有没有人知道什么情况导致边界崩溃达不到 Chrome 中的理想状态？

这是示例中的效果 - 单元格二似乎忽略了边框折叠。

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 元素。

您要让 table 单元格显示为 flex 而不是 inline-table 元素，因此它不能折叠其边框。

请注意，这也不是特定的 Chrome。在 Edge 和 Firefox 中测试会产生相同的结果。

Answer 2

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

所以唯一的解决方案似乎是在 <td> 中添加一个容器 <div> 元素，它自然应该占据整个 table 单元格，除了它的填充（如果有的话） , 并使其具有 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>

CSS border-collapse 在 Chrome 和 display:flex inside a td 中不能完全工作？

CSS border-collapse doesn't work fully in Chrome with display:flex inside a td?

css

border