table单元格设置display:flex出现双重边框，如何保留flex属性消除该问题？

根因说明 #

td元素默认是display: table-cell属性，表格设置的border-collapse: collapse仅对表格体系的元素生效。当你给.student类对应的td强制设置display: flex后，该元素就失去了原生表格单元格的特性，边框无法和相邻单元格合并，自然就会出现双重边框的问题。

可行解决方案 #

方案1：不修改HTML结构，改用行内垂直对齐实现效果 #

不需要使用flex布局，直接利用表格单元格的原生对齐能力配合行内元素对齐规则即可实现图片和文本的垂直居中，完全不会破坏原有边框逻辑：
修改CSS代码如下：

/* Student Name styling */
.student {
  padding: 6px;
  box-sizing: border-box;
  /* 删除原有的display: flex、align-items: center */
  vertical-align: middle;
  text-align: left;
}
.pic{
  display: inline-block;
  width: 25px;
  clip-path: circle();
  margin-right: 10px;
  /* 新增行内垂直对齐 */
  vertical-align: middle;
}
.student span {
  vertical-align: middle;
}

方案2：保留flex布局，调整DOM结构 #

如果你一定要使用flex做布局，不要直接修改td的display属性，在td内部嵌套一层容器承载flex逻辑即可：

1. 调整HTML部分，在.student的td内部套一层容器：

<td class='student'>
  <div class="student-content">
    <img class='pic' src='../pics/default.png'>
    <span>Jane Doe</span>
  </div>
</td>

2. 修改对应CSS：

/* Student Name styling */
.student {
  padding: 6px;
  box-sizing: border-box;
  /* 删除原有的display: flex、align-items: center */
}
.student-content {
  display: flex;
  align-items: center;
}

两种方案都可以解决双重边框的问题，同时实现内容垂直居中的需求。

内容的提问来源于stack exchange，提问作者user14919988