设置一些字体的边框宽度为" 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>
border-collapse属性只适用于table和inline-table元素。
你是在告诉表格单元格显示为flex而不是inline-table元素,这样它就不会折叠边框。
请注意,这不是特定的Chrome。在Edge和Firefox中测试得到相同的结果。
使用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>