LWC水平滚动条

Question

我有一个LWC组件，有15个输入框侧对侧。所有的输入框都有一个宽度，问题是内容在右边的组件下面有机会。如何在我的自定义LWC中添加一个滚动条，以便大小是固定的，并且我可以从左向右滚动以在每个输入框中添加值？

我试过这个：

 <div class="slds-scrollable_x" style="margin:20px; margin-bottom:100px;">
            <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <thead>
                    <template if:true={opportunity.data}>
                        <tr class="slds-text-title_caps">
                            <th scope="col">
                                <div class="slds-truncate">#</div>
                            </th>
                            <template for:each={createHeader} for:item="field">
                                <th key={keyIndex2} scope="col">    
                                    <div class="slds-truncate">
                                        <lightning-layout-item key={field} size="1">
                                            {field}
                                        </lightning-layout-item>
                                    </div>
                                </th>
                            </template>
                            <th scope="col">
                                <div class="slds-truncate">
                                    Action
                                </div>
                            </th>
                        </tr>
                        <template for:each={contentArray} for:item="field" for:index="index">
                            <tr key={keyIndex}>
                                <td scope="col">
                                    {index}
                                </td>
                                <td scope="col" width="400px">
                                    <!--COMPONENT-->
                                    <c-lwc-lookup data-name="product2" object-api-name="Product2" data-index={index} access-key={index} icon-name="standard:product" onrecordselection={changeHandler}> </c-lwc-lookup>
                                </td>
                                <td scope="col" width="300px">
                                    <!--InputField-->
                                    <lightning-input value={field.Description__c} data-index={index} access-key={index} type='text' name="fieldDescription" onchange={changeHandler}>
                                    </lightning-input>
                                </td>

                                <template for:each={amountArray} for:item="field2" for:index="index2">
                                    <td key={field2.index2} scope="col">    
                                        <lightning-input key={index2} data-index={index2} access-key={index} type='text' name="fieldAmount" onchange={changeHandler}>
                                        </lightning-input>
                                    
                                    </td>
                                </template>
                                <td scope="col">
                                    <lightning-icon icon-name="action:delete"  access-key={index} size="small" title="large size" onclick={removeRow}>
                                    </lightning-icon>
                                </td>
                            </tr>
                        </template>
                    </template>
                </thead>
            </table>
        </div>

但运气不好！谢谢

Answer 1

因为这个例子只是html，而且很可能是css领域，所以很难给出具体的内容，但是我可以共享一个水平滚动的lwc，作为一个示例。

也许app.css和/或app.html文件将帮助OP或有人登陆这里。

示例：https://webcomponents.dev/edit/22lfzK8mTJfFWQuUSwEr