0

I have a datatable inside of a slds-grid so that I can have multiple tables side by side. When I do this though, the LWC does not fit to the page. Is there a tag I am missing that will enforce strict positioning?

<template if:true={ready}>
    <lightning-card id="mainForm">
    <lightning-card ng-app="app" ng-controller="MainController as main" class="mb30">
      ...other code in here that is not relevant
     <div class="slds-grid">
         <template for:each={ml.Childs} for:item="month">
             <div key={month} class="slds-col">
                <lightning-datatable 
                  key={month} 
                   key-field="id" 
                   hide-table-header 
                   hide-checkbox-column 
                   show-row-number-column
                   data={month.DaysInMonthList}
                   columns={columns}>
                 </lightning-datatable>
             </div>
          </template>
       </div>

enter image description here

*I have also tried doing just a html table with flex-box css and still no luck

1 Answer 1

0

I ended up breaking out the data table into a HTML table and it worked fine. There must be some css attached to the slds-col or datatable that were in direct conflict with the rest of the page's css.

You must log in to answer this question.

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