0

I need to change the size of lightning:card to max-content depend on the table inside card

This is output I am getting

This is output I am getting

Component

<aura:component implements="force:appHostable" controller="SalesTargetController">
     <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
     <aura:attribute name="NoOfWeeks" type="Integer"/>
     <aura:attribute name="fromDate" type="date" />
     <aura:attribute name="toDate" type="date" />
     <aura:attribute name="weeks"  type="list"/>
     <aura:attribute name="accts"  type="Account[]"/>
     <div class="card">
          <lightning:card title="Targets" >
               <lightning:input class="EndDateField" type="date" label="From" value="{!v.fromDate}" min="2019-01-01" />
               <lightning:input class="EndDateField" type="date" label="To" value="{!v.toDate}" min="{!v.fromDate}" />
               <lightning:button label="SetTarget" title="Neutral action" onclick="{! c.setTarget }"/>
               <aura:if isTrue="{!not(empty(v.weeks))}">
                    <div class="slds-text-longform" style="width: max-content;">
                         <table class="table">
                              <th>
                                   <p>Account Name</p>
                              </th>
                              <aura:iteration items="{!v.weeks}" var="week" >
                                   <th>{!week}</th>
                              </aura:iteration>
                              <aura:iteration items="{!v.accts}" var="acct" aura:id="account">
                                   <tr>
                                        <td>
                                             <div onclick="{!c.handleClick}" data-value="{!acct.Id}">
                                                  <p>{!acct.Name}</p>
                                             </div>
                                        </td>
                                        <aura:iteration items="{!v.NoOfWeeks}" >
                                             <td>
                                                  <lightning:input type="number" label="" formatter="currency" step="0.01"></lightning:input>
                                             </td>
                                       </aura:iteration>
                                  </tr> 
                             </aura:iteration>
                        </table>
                        <lightning:button class="slds-align_absolute-center" variant="brand" label="Save" onclick="{! c.setTarget }"/>
                   </div>
              </aura:if>
         </lightning:card>
    </div>

closed as off-topic by glls, Pranay Jaiswal, Reshma, Raul, crmprogdev Feb 11 at 17:55

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Programming questions not specific to Salesforce are off-topic here, but can be asked on Stack Overflow." – glls, Pranay Jaiswal, Reshma, Raul, crmprogdev
If this question can be reworded to fit the rules in the help center, please edit the question.