Td in table differs 1px with and without text fill

premise: now write a table, content with vue v-for loop, the tr height is 40px; add border-bottom:1px;
question: the part of td, check the element height is 41px when there is text filling; when there is no text filling, check the element height is 40px; how to remove the 1px gap?

table{
  width: 100%;
  border-collapse:collapse;
  thead tr{
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid -sharpdddddd;
    font-weight: bold;
    background-color: -sharpf0f4f5;
  }
  tbody tr{
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid -sharpdddddd;
  }
}

clipboard.png

clipboard.png

Css
Mar.13,2021

set line-height to 39px
according to the border-box model, the border-bottom,content-box height of 40px's height,1px is 39px
you give him a 40px's line-height text to enlarge content-box 1px

Menu