To reduce the cell/row height of an HTML table row in Blazor

user_9873164 0
Viewed 635

I have a very simple html table in a Blazor server project and I am trying to reduce the space below the text in the cell. Changing height in the td,th section increases the standard height but does not reduce it. I have tried making margin and padding 0 but this did not reduce the space.

<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>
blazor-server-side blazor css html
1 Answers

What you are looking for is line-height

<table>
    <tr class="loose">
        <th>Title</th>
    </tr>
    <tr class="tight">
        <td>Cell</td>
    </tr>
</table>

<style>
    tr.loose { line-height: 4rem;}
    tr.tight { line-height: 1.5rem;}
</style>

Demo: https://blazorrepl.com/repl/GbEnmGcn38GdDUWW44

user_26586970
Related