Html th 内的 div 标签没有占据全高

我正在制作一张html表格.在表标题中，我想要标题名称和图像.表格宽度是固定的，如果有额外的列，那么它将是可滚动的.

因为我想在标题中有两样东西(文本和图像)，在tr的th标签内，我放了一个div，并把它变成了flex个框.

以下是我的代码:

<table class="Table_table__7VuZZ">
   <thead>
      <tr>
        <th>
          <div class="test">
             <div>Layers</div>
             <div>
                <img src="pin.svg" class="icon"/>
             </div>
          </div>
        </th>
        <th>
          <div class="test">
             <div>Layer Policy Number testing purpose<</div>
             <div>
                <img src="pin.svg" class="icon"/>
             </div>
          </div>
        </th>
        <th>
          <div class="test">
             <div>Layer Policy Number testing purpose<</div>
             <div>
                <img src="pin.svg" class="icon"/>
             </div>
          </div>
        </th>
        <th>
          <div class="test">
             <div>Layer Policy Number testing purpose<</div>
             <div>
                <img src="pin.svg" class="icon"/>
             </div>
          </div>
        </th>
    </tr>
 </thead>
 <tbody>
    <tr>
       <td>Primary</td>
       <td>111</td>
       <td>NO</td>
       <td>aa</td>
    </tr>
 </tbody>
</table>

下面是css:

.test {
 display : flex;
 height : 100%;
 position : top
}

th, td, tr {
  padding : 0;
  margin : 0
}

table {
  border-collapse : collapse;
  width : 200px;
  overflow: scroll
}

.icon{
  height : 15px;
  width : 15px
}

我不知道为什么th里面的div不是https://codepen.io/devendra1th/pen/wvEERpx%的高度.它总是在th号公路的中心.我try 将高度设置为https://codepen.io/devendra1th/pen/wvEERpx%的div，但它不起作用.我已将所有padding和margin设置为0.还是不管用.这是代码链接:https://codepen.io/devendra1th/pen/wvEERpx

有没有人能帮我把th里面的div号装到div%的高度？