0

I'm new as a Salesforce developer. I'm trying to create an LWC to place inside a tab, but the component is being placed outside the allowable area. As shown in the image below. enter image description here

This is my HTML code that I build :

<template>
<lightning-card title="Teste">
<table class="slds-table slds-table_cell-buffer slds-no-row-hover slds-table_bordered slds-table_col-bordered" aria-label="Example table of Opportunities with vertical borders">
    <thead>
        <tr class="slds-line-height_reset">
            <th class="" scope="col" colspan="9">
                <div class="slds-truncate" title="Opportunity Name">Id</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="slds-hint-parent">
            <th data-label="Opportunity Name" scope="row">
                <div class="slds-truncate" title="Name">{Name}</div>
            </th>
            <th data-label="Account Name">
                <div class="slds-truncate" title="DocNum">CPF</div>
            </th>
            <th data-label="Close Date">
                <div class="slds-truncate" title="Date">birth date</div>
            </th>
            <th data-label="Prospecting">
                <div class="slds-truncate" title="MotherName">mother's name</div>
            </th>
        </tr>
        <tr class="slds-hint-parent">
            <th data-label="Opportunity Name" scope="row">
               <div class="slds-truncate" title="Name">Teste Admin</div>
            </th>
            <th data-label="Account Name">
                <div class="slds-truncate" title="DocNum">343.928.798-01</div>
            </th>
            <th data-label="Close Date">
                <div class="slds-truncate" title="Date">04/05/1992</div>
            </th>
            <th data-label="Prospecting">
                <div class="slds-truncate" title="MotherName">Mother Admin</div>
            </th>
        </tr>
        <tr class="slds-hint-parent" >
            <th data-label="Opportunity Name" scope="row" colspan="9">
               <div class="slds-truncate" title="Name">Status Doc</div>
            </th>
        </tr>
        <tr class="slds-hint-parent">
            <th data-label="Opportunity Name" scope="row" colspan="9">
               <div class="slds-truncate" title="Name">Status CPF in 26/06/2021 : regular</div>
            </th>
        </tr>
    </tbody>
</table>
</lightning-card>

Why is this happening? And how can I solve this problem?

1
  • 1
    This does look correct, but UI is not rendered as per html. Do you have any custom css file being uploaded which overrides standard slds css? Oct 30, 2021 at 0:54

1 Answer 1

1

I just copied all your code and it shows as expected for me.

enter image description here

Here the code :

enter image description here

So maybe there is any custom css file being uploaded which overrides standard slds css?

Otherwise I suggest using standard Lightning datatable : Lightning datatable .

Which can help you in developing and will save your time.

1
  • Thank you very much, you are really correct. I went to investigate and there was a css file customizing the table with a float: left. It's perfect now! Oct 31, 2021 at 1:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .