Html 使用flex实现CSS边框加倍

我有一个我正在使用的CSS。每当我将“display:flex”属性添加到.student时，边框就会突然加倍。我需要flex属性，因为我希望文本垂直居中，靠近.student表数据单元格内的图像。我怎样才能摆脱这个讨厌的双重边界？每当我删除display:flex属性时，双边框就会消失，但是文本不再垂直靠近图像。我尝试过空白、边界塌陷和其他几种方法，但都没有成功

密码：

CSS:

HTML:

10月8日到期
五月花词汇
10月15日到期
蜡像馆
10月15日到期
美国革命
10月27日到期
詹姆斯敦
11月1日到期
比较菌落
无名氏
无名氏

发行图像：

---

您可以尝试使用此选项，而不是使用

边框：1px实心灰色

td {
  text-align: center;
  border: 1px solid gray;
  border-bottom: 0;
  border-right: 0;
  background-color: white
}

tr:last-of-type td {
  border-bottom: 1px solid gray;
}

td:last-of-type {
  border-right: 1px solid gray;
}


/*-----------{成绩册}------------*/
.成绩册{
位置：绝对位置；
顶部：60px；
左：0；
宽度：100vw；
高度：计算（100vh-126px）；
溢出y：滚动；
框大小：边框框；
}
/*表格样式*/
桌子{
表布局：固定；
边界塌陷：塌陷；
}
/*表格标题样式*/
thead th{
高度：60px；
宽度：100px；
排名：0；
z指数：2；
职位：-网络工具包粘性；
位置：粘性；
右边框：1px纯色灰色；
背景色：白色；
}
泰德：第一个孩子{
左：0；
z指数：10；
}
th{
填充：10px 16px；
文本对齐：左对齐；
字体大小：正常；
颜色：灰色
}
表2.截止日期{
字体大小：14px；
边际下限：8px
}
表.标题{
字号：18px；
颜色：#5B7042
}
/*表数据样式*/
运输署{
文本对齐：居中；
边框：1px纯色灰色；
边界底部：0；
右边界：0；
背景颜色：白色
}
tr：td型的最后一个{
边框底部：1px纯色灰色；
}
td：最后一种类型{
右边框：1px纯色灰色；
}
迟到{
背景色：#EA5D6B
}
td输入{
文本对齐：居中；
填充：4px；
保证金：0；
宽度：114px；
边界：无；
}
/*学生姓名样式*/
.学生{
填充：6px；
框大小：边框框；
显示器：flex；
对齐项目：居中；
边缘底部：-1px；
}
图{
显示：内联块；
宽度：25px；
剪辑路径：圆形（）；
右边距：10px；
}
.pic img{
显示：无
}
/*-------------{CONTROLS}--------------*/
.控制{
显示器：flex；
位置：绝对位置；
底部：10px；
左：0；
宽度：100vw；
高度：56px；
边框顶部：1px实心#DDDDDD
}

10月8日到期
五月花词汇
10月15日到期
蜡像馆
10月15日到期
美国革命
10月27日到期
詹姆斯敦
11月1日到期
比较菌落
无名氏
无名氏
它不是加倍，它只是创建两个容器的边框，如果我们考虑水平线的边界，那么它只是上简DOE容器和下某个身份不明的人的边界。因为您已经给出了边框
边框：1px实心灰色至
td
。所以它是
1px+1px=2px
@SAM，那么我该如何解决这个问题呢？选择容器并使
边框底部为0px
。这是一项乏味的工作。这可能会有所帮助
<link rel="stylesheet" href="../style.css">

<div class='gradebook'>
  <table>
    <thead>
      <tr>
        <th style='width: 200px'></th>
        <th>
          <div class='duedate'>Due Oct 08</div>
          <div class='title'>Mayflower Vocabulary</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>Wax Museum</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>American Revolution</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 27</div>
          <div class='title'>Jamestown</div>
        </th>
        <th>
          <div class='duedate'>Due Nov 1</div>
          <div class='title'>Comparing Colonies</div>
        </th>
      </tr>
    </thead>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>Jane Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td class='late'><input type='text' value='10'></td>
      <td><input type='text' value='9.5'></td>
      <td><input type='text' value='10'></td>
      <td><input type='text' value='5'></td>
    </tr>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>John Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td><input type='text' value='8'></td>
      <td><input type='text' value='9'></td>
      <td><input type='text' value='10'></td>
      <td class='late'><input type='text' value='9'></td>
    </tr>
  </table>
</div>

<div class='controls'>
</div>

td {
  text-align: center;
  border: 1px solid gray;
  border-bottom: 0;
  border-right: 0;
  background-color: white
}

tr:last-of-type td {
  border-bottom: 1px solid gray;
}

td:last-of-type {
  border-right: 1px solid gray;
}