Я новичок в качестве разработчика Salesforce. Я пытаюсь создать LWC для размещения внутри вкладки, но компонент размещается за пределами допустимой области. Как показано на изображении ниже. введите здесь описание изображения

Это мой HTML-код, который я создаю:

<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>

Почему это происходит? И как я могу решить эту проблему?

0
Derek F 19 Ноя 2021 в 19:00
1
Это выглядит правильно, но пользовательский интерфейс не отображается в соответствии с html. Есть ли у вас загружаемый пользовательский файл css, который переопределяет стандартные slds css?
 – 
Nagendra Singh
30 Окт 2021 в 03:54

1 ответ

Лучший ответ

Я только что скопировал весь ваш код, и он отображается так, как я ожидал.

enter image description here

Вот код:

enter image description here

Так что, может быть, загружается какой-либо пользовательский файл css, который переопределяет стандартные slds css?

В противном случае я предлагаю использовать стандартную таблицу данных Lightning: Данные Lightning.

Что может помочь вам в разработке и сэкономит ваше время.

1
Vitalii Dehnerys 30 Окт 2021 в 12:26
Спасибо большое, вы действительно правы. Я пошел исследовать, и там был файл css, настраивающий таблицу с плавающей запятой: слева. Теперь все идеально!
 – 
Eduardo Murakami
31 Окт 2021 в 04:46