在Blazor中减少HTML表格行的单元格/行高度

我在Blazor服务器项目中有一个非常简单的html表，我试图减少单元格中文本下方的空间。更改td，th段中的高度会增加标准高度，但不会降低标准高度。我曾尝试将边距和填充设置为0，但这并没有减少空间

<style>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        font-size: 12px;
        padding: 0px;
        margin: 0px;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 0px;
        margin: 0px;
        height: 12px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    td {
        padding: 0px;
        margin: 0;
        height: 10px;
        padding-bottom: 0px;
        margin-bottom: 0;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }

    tr {
        height:2px;
        padding: 0px;
    }

</style>

桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
字体大小：12px；
填充：0px；
边际：0px；
}
td，th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：0px；
边际：0px；
高度：12px；
垫底：0px；
边缘底部：0px；
}
运输署{
填充：0px；
保证金：0；
高度：10px；
垫底：0px；
页边距底部：0；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
tr{
高度：2倍；
填充：0px；
}

您需要的是线条高度

标题
细胞

tr.loose{线高度：4rem；}
tr.tight{线高度：1.5rem；}

演示：