table中的td在有文字填充和没有文字填充的情况下差1px

table{
  width: 100%;
  border-collapse:collapse;
  thead tr{
    height: 40px;
    line-height: 39px;
    border-bottom: 1px solid #dddddd;
    font-weight: bold;
    background-color: #f0f4f5;
  }
  tbody tr{
    height: 40px;
    line-height: 39px;
    border-bottom: 1px solid #dddddd;
  }
}
// 将height设置成大于line-height 1px可解决问题
<style>
    #id_tables th {
        text-align: center;
        padding: 0px;
        border-color: black;
        vertical-align: middle;
        height: 21px;
        line-height: 20px;
        {#border-top: 0px;#}
    }

    #id_tables td {
        text-align: center;
        padding: 0px;
        border-color: black;
        vertical-align: middle;
        height: 21px;
        line-height: 20px;
        empty-cells: show;
        border-top: none;
    }
</style>

根据border-box模型,21px的height,1px的border-bottom,content-box的高度就为20px
给他一个21px的line-height的文字就把content-box撑大了1px

posted @ 2023-05-10 21:55  笑而不语心自闲  阅读(22)  评论(0编辑  收藏  举报