Q: LWC Horizontal scrollbar I have a LWC component with 15 input box side to side. All inputbox have a width and the problem is the content goes under the component on the right side in Opportunities.
How can I add a scrollbar in my custom LWC so that the size is fix and I can scroll left to right to add value in each inputboxes?
I tried this:
 <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>

But no luck!
Thanks

A: Since the example is only the html and it'd likely be css territory, it's hard to give a specific but i can share a horizontal scrolling lwc that works as an example.
Perhaps the app.css and/or app.html files will help OP or someone landing here.
Example: https://webcomponents.dev/edit/22lfzK8mTJfFWQuUSwEr
