function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Vaibhab ShahVaibhab Shah 

Distorted column at the end of the table


I have used one lightning button at the end of the row which is getting distorted and not in shape with the other columns in a row.
Initially there will be any row in the table. only header with columns will be visible. On clicking the Add row, rows will be added.
I have attached the screenshot.

PFB my code:

    <lightning-card class="slds-card_boundary" icon-name="custom:custom13">
        <h1 slot="title">{title}</h1>
        <div class="slds-card__body slds-card__body_inner">
            <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-m-bottom_large"> 
                    <tr class="slds-text-title_caps">
                        <template for:each={columns} for:item="column">
                            <th key={column.apiName}><div class="slds-truncate">{column.label}</div></th>
                    <template for:each={rows} for:item="row" for:index="index">
                        <tr class="inputRows" key={row.uuid}>
                            <template for:each={columns} for:item="column">
                                <td key={column.apiName}>
                                    <c-input-table-cell record={row} field={column.apiName}></c-input-table-cell>
                                <lightning-button value={index} variant="brand" label="Delete Row" onclick={removeRow}></lightning-button>
                        <td><lightning-button variant="brand" label="Add Row" onclick={addRow}></lightning-button></td>

Vaibhab ShahVaibhab Shah
User-added image