为什么我的第一行高度高于其他行 HTML

Question

I'm wondering why the height of first row March 2020 of first product Jiko Supa Eco is larger than other rows, even though I have fixed it too. ? Before posting the question, I check in developer tools for any blank data, which might be causing the problem, but that's not the case. Thanks to those helping hands

Here is my HTML code

<table>
    <thead class="loanProductsHeader">
        <tr>
            <td>Installment Month</td>
            <td>Due Date</td>
            <td>Installment Amount</td>
            <td>Amount Received</td>
            <td>Payment Date</td>
            <td>Mpesa Code</td>
        </tr>
    </thead>
    <tbody *ngFor="let loanInstallments of loanProduct.loanPayments | orderBy: 'dueDate'; index as i ">
        <tr style="max-height:22px;">
            <td>
                {{loanInstallments.dueDate | date:'MMMM yyyy'}}
            </td>
            <td>
                {{loanInstallments.dueDate | date:'dd/MM/yyyy'}}
            </td>
            <td>
                {{loanInstallments.installmentAmount | currency:'KES '}}

            </td>
            <td> {{loanInstallments.amountReceived| currency:'KES '}}
            </td>
            <td> {{loanInstallments.dateReceived | date:'dd/MM/yyyy'}}
            </td>
            <td>
                {{loanInstallments.receiptNumber}}
            </td>
        </tr>
    </tbody>
</table>

and here is scss code

.mainContainer {
    width: 100%;
    // display: flex;
    // flex-direction: column;
}

mat-card {
    background: unset;
}

mat-card-title {
    margin-top: 3%;
    // margin-bottom: -1%;
    background: #2D4431;
    padding: 10px;
    color: white;
    border-radius: 4px;
}

table {
    width: 100%;
    height: 200px;
    background: white;
    padding: 20px;
    border-radius: 4px;
}

tr:hover {
    background-color: #2D4431;
    color: white
}

.loanProductsHeader {
    background: lightgray;
    font-size: large;
}

textarea {
    width: 100%;
    height: 100px;
    margin-top: 15px;
    font-size: initial;
}

.editButton {
    height: 25px;
}

:host ::ng-deep .mat-button-wrapper {
    vertical-align: super
}

Answer 1

I tried the following knowing I added multiple as the real data is not available.

CSS

td { padding: 10px 0;}

HTML

<tbody *ngFor="let loanInstallments of loanProduct.loanPayments | orderBy: 'dueDate'; index as i ">
            <tr>
                <td>
                    {{loanInstallments.dueDate | date:'MMMM yyyy'}}
                </td>
                <td>
                    {{loanInstallments.dueDate | date:'dd/MM/yyyy'}}
                </td>
                <td>
                    {{loanInstallments.installmentAmount | currency:'KES '}}

                </td>
                <td> {{loanInstallments.amountReceived| currency:'KES '}}
                </td>
                <td> {{loanInstallments.dateReceived | date:'dd/MM/yyyy'}}
                </td>
                <td>
                    {{loanInstallments.receiptNumber}}
                </td>
            </tr>
            <tr>
                <td>
                    {{loanInstallments.dueDate | date:'MMMM yyyy'}}
                </td>
                <td>
                    {{loanInstallments.dueDate | date:'dd/MM/yyyy'}}
                </td>
                <td>
                    {{loanInstallments.installmentAmount | currency:'KES '}}

                </td>
                <td> {{loanInstallments.amountReceived| currency:'KES '}}
                </td>
                <td> {{loanInstallments.dateReceived | date:'dd/MM/yyyy'}}
                </td>
                <td>
                    {{loanInstallments.receiptNumber}}
                </td>
            </tr>
            <tr>
                <td>
                    {{loanInstallments.dueDate | date:'MMMM yyyy'}}
                </td>
                <td>
                    {{loanInstallments.dueDate | date:'dd/MM/yyyy'}}
                </td>
                <td>
                    {{loanInstallments.installmentAmount | currency:'KES '}}

                </td>
                <td> {{loanInstallments.amountReceived| currency:'KES '}}
                </td>
                <td> {{loanInstallments.dateReceived | date:'dd/MM/yyyy'}}
                </td>
                <td>
                    {{loanInstallments.receiptNumber}}
                </td>
            </tr>

        </tbody>

Answer 2

By the looks of the screenshot, this does not look like a CSS issue. The whitespace is evenly dispersed and the row looks empty—are you sure you're getting all your data? It looks like some loanPayments have null data, ie indexes 0 and 2 of your array loanProduct .

If this is a valid state for your data, you can use ngIf and only render the row if loanInstallments is truthy, or if loanInstallments.dueDate or loanInstallments.installmentAmount (or any of its properties) exist to prevent whitespace from showing.